vue+elementUI实现导出el-table表格(fixed固定列数据不重复)

//安装依赖，主要是两个依赖:(xlsx 和 file-saver)
npm install --save xlsx file-saver

src文件下建立个目录until（存放公用的js文件），until下建立个excel.js

//引入依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';


// id绑定的id，title表格名称
export const excel = (id, title) => {
  /* generate workbook object from table */
  //  判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
  let fix = document.querySelector('.el-table__fixed');
  let wb;
  if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id).removeChild(fix));
    document.querySelector('#'+id).appendChild(fix);
  } else {
    wb = XLSX.utils.table_to_book(document.querySelector('#'+id));
  }


  //网上wb = XLSX.utils.table_to_book(document.querySelector('#'+id));直接这样写，如果存在固定列，导出的excel表格会重复两遍

  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title+'.xlsx')
  } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
  return wbout
};

在需要导出的页面表头绑定id和XLSX.uitls.table_to_book

<el-table
      :data="tableData"
      id="out-table"
      XLSX.uitls.table_to_book
      :header-cell-style="{background:'#eef1f6',color:'#606266',height:'60px'}"
      empty-text="	暂无数据">
</el-table>

然后引入封装的js

在methods中调用

<el-button @click="exportExcel">导出</el-button>

exportExcel () {//导出表格 传入两个参绑定的id和表格名称
  excel('out-table','会员管理')
},