vue element-ui导出el-table表格为Excel文件（及数据导出重复问题）

一.el-table表格导出为Excel文件

1. 首先需要安装依赖

cnpm install --save xlsx file-saver

2. 为el-table表格添加id属性标识

<el-table
    id="educe-table"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    :header-cell-style="{ background: '#f4f4f4' }"
    @selection-change="handleSelectionChange"
></el-table>

3. 添加一个导出按钮

<el-button class="btn-seal" @click="exportExcel">导出结果</el-button>

4. 引入导出Excel表格依赖

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

5. 接下来编写导出方法

methods: {
    exportExcel() {
      // 1.生成Excel工作簿对象
      var wb = XLSX.utils.table_to_book(document.querySelector('#educe-table'));
      // 2.手机号，身份证号等会默认使用科学计数法表示，则需要这样设置
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#educe-table"),
        { raw: true }
      );
      // 获取二进制字符串作为输出
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        book: true,
        type: 'array',
      })
      try {
        FileSaver.saveAs(
        // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
        // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。  
          new Blob([wbout], { type: 'appliction/octet-stream' }),
          // 设置导出的文件名称可随意
          'result.xlsx'
        )
      } catch (e) {
        if (typeof console != 'undefined') console.log(e, wbout);
      }
      // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
      return wbout
    }
}

6.如果el-table的数据导出为两份重复，可以用下面的代码替换第五步。
导出两份的原因： 我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。

exportExcel() {
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      let fix = document.querySelector(".el-table__fixed");//如果是都给了fixed样式
      let fix = document.querySelector(".el-table__fixed-right");//如果是只有右边有fixed样式
      let wb;
      if (fix) {
        //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(
          document.querySelector("#educe-table").removeChild(fix),
          xlsxParam
        );
        document.querySelector("#educe-table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(
          document.querySelector("#educe-table"),
          xlsxParam
        );
      }
      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") {
        }
      }
      return wbout;
    },

二.扩展使用

1、数据分页情况下全部导出数据：
在表格分页情况下，需要导出全部数据，需在html中重新添加表格并隐藏，将这个表格作为隐式的导出组件。
2、数据多选导出数据：
数据多选导出类似全部导出，将勾选的数据插入至隐式数据表格中，导出即可。