element-ui中table表格导出excel&Excel出现重复表格的解决办法

1. 安装依赖

npm install --save xlsx file-saver

2. 引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3. methods中写方法

情况一：table中没有使用fixed属性

exportExcel() {
  var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
  var wb = XLSX.utils.table_to_book(
    document.querySelector("#table_data"),
    xlsxParam
  );

  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      "售后质量反馈表.xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") {
      console.log(e, wbout);
    }
  }
  return wbout;
}

情况二：table使用了fixed属性固定列，导出表格时会出现导出两次的问题

exportExcel() {
   var xlsxParam = { raw: true }
   let fix = document.querySelector(".el-table__fixed");
   let wb;
   if (fix) {
     wb = XLSX.utils.table_to_book(
       document.querySelector("#table_data").removeChild(fix)
     );
     document.querySelector("#table_data").appendChild(fix);
   } else {
     wb = XLSX.utils.table_to_book(document.querySelector("#table_data"),xlsxParam);
   }
   let wbout = XLSX.write(wb, {
     bookType: "xlsx",
     bookSST: true,
     type: "array",
   });

   try {
     FileSaver.saveAs(
       new Blob([wbout], { type: "application/octet-stream" }),
       "xxx.xlsx"
     );
   } catch (e) {
     if (typeof console !== "undefined") console.log(e, wbout);
   }
   
   return wbout;
 }