element-ui导出el-table表格为Excel文件

1.首先安装依赖

cnpm install --save xlsx file-saver

 2.导入Excel表格依赖

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//在引用过程中可能会出现版本的冲突
import * as XLSX from 'xlsx'
//将引用方式改为这个就行了

1、xlsx库

xlsx是一个流行的JavaScript库，用于在浏览器中读取、解析和生成Excel文件。它支持多种Excel文件格式，包括XLSX、XLS、CSV和ODS。你可以使用xlsx库来创建、修改和操作工作簿、工作表、单元格等Excel文件中的元素。

2、file-saver库

file-saver是一个用于在浏览器中保存文件的JavaScript库。它提供了一个简单的API，可以将数据保存为文件，并将其下载到用户的本地计算机。file-saver库通过创建一个Blob对象并触发浏览器的文件下载功能来实现文件保存。

3.在使用过程中需要先为el-table添加id标识

<el-table id="educe-table"></el-table>

4.然后调用方法，来实现导出功能

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' }),
          // 设置导出的文件名称可随意
          'table.xlsx'
        )
      } catch (e) {
        if (typeof console != 'undefined') console.log(e, wbout);
      }
      // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
      return wbout
    }
}

5.如果el-table的数据导出为两份重复，可以用下面的代码替换第4步

导出两份的原因： 我使用了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 fix = document.querySelector(".el-table__fixed-left");//如果是只有左边有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" }),
          "table.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") {
        }
      }
      return wbout;
    },