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


然后引入封装的js

在methods中调用

导出

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

 

你可能感兴趣的:(vue+elementUI实现导出el-table表格(fixed固定列数据不重复))