vue2.0+element-ui+js-xlsx.js+fileSaver.js导出表格到Excel出现重复表格解决办法

如果element-ui的table使用了fixed属性固定列,导出表格时会出现导出两次的问题,是因为在table中有两个table标签,我们可以通过代码解决这个问题,注意代码中拷贝了一个table元素,否则直接删除会删除页面中的表格

output(tableID) {
            /* generate workbook object from table */
            let table = document.querySelector("#"+tableID).cloneNode(true);
            // 因为element-ui的表格的fixed属性导致多出一个table,会下载重复内容,这里删除掉
            table.removeChild(table.querySelector(".el-table__fixed"))
            let wb = XLSX.utils.table_to_book(table,{raw:true});//mytable为表格的id名
            /* get binary string as output */
            let excName = this.companyReport;
            if (this.dataEndDate) {
              excName += '('+this.dataEndDate+')'
            }
            let wbout = XLSX.write(wb, {
              bookType: "xlsx",
              bookSST: true,
              type: "array",
            });
            try {
              FileSaver.saveAs(
                new Blob([wbout], { type: "application/octet-stream" }),
                excName+".xlsx"
              );
            } catch (e) {
              if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
          },

猜你喜欢

转载自blog.csdn.net/WYA1993/article/details/85319138