前端导出excel(element+xlsx+filesaver插件),表格数据重复问题解决

纯前端导出excel，表格数据渲染重复

业务需求

页面有table表格里的多条数据，并且没有分页。需求希望不调用接口，纯前端生成excel文件实现导出功能。

效果图

1、安装依赖(xlsx 和 file-saver)

npm install --save xlsx file-saver

2、Html代码块

为了让大家看清楚，我把自己的表头结构也全部放出来（主要给el-table添加id，方便找到）

<el-table id="out-table" height="450" :data="tableData">
        <el-table-column  width="120" prop="zhonglei" fixed>el-table-column>
        <el-table-column type="index" label="序号" width="50">el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.minWidth"
        >el-table-column>
        
        <el-table-column label="自营网络平台渠道" >
          <el-table-column 
            v-for="item in columns1"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
          el-table-column>
        el-table-column>
        <el-table-column label="第三方网络平台渠道">
          <el-table-column
            v-for="item in columns1"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          >
          el-table-column>
        el-table-column>
      el-table>

3、js代码块

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

exportExcel() {
	  //找到要导出对应的table表格
      var exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      var exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
      //sheetjs.xlsx为导出表格的标题名称
      try {
        FileSaver.saveAs(new Blob([exportTableOut], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, exportTableOut) }
      return exportTableOut
},

4、导出完成(但是会发现导出的excel表里数据会重复出现两份)

造成原因是：使用el-table里的fixed属性时会创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当导出整个el-table 就会将两个div内的table都导出，导致数据重复。

5、修改js逻辑，判断删除fixed表格

 exportExcel() {
      //不加判断table表格导出会有两份数据，是因为fixed造成的，所以要筛选去重
      // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
      var fix = document.querySelector('.el-table__fixed');
      var exportTable;
      if (fix) {
        exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix));
        document.querySelector('#out-table').appendChild(fix);
      } else {
        exportTable = XLSX.utils.table_to_book(document.querySelector('#out-table'));
      }
      var exportTableOut = XLSX.write(exportTable, { bookType: 'xlsx', bookSST: true, type: 'array' })
      //sheetjs.xlsx为导出表格的标题名称
      try {
        FileSaver.saveAs(new Blob([exportTableOut], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
      } catch (e) { if (typeof console !== 'undefined') console.log(e, exportTableOut) }
      return exportTableOut
    },

6、此刻再次导出时会出现文章开篇时的效果图，完美实现纯前端导出excel.

局限性：只能导出当前页的数据，无法区分分页导出。所以要想实现完美的导出，还是让后台做接口调用吧。