1. 程式人生 > >vue2.0+element-ui+js-xlsx.js+fileSaver.js匯出表格到Excel出現重複表格解決辦法

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;
          },