将el-table导出Excel文件

1.安装依赖

npm install --save xlsx file-saver

2.在man.js中引入依赖

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

Vue.prototype.$FileSaver = FileSaver; //设置全局

Vue.prototype.$XLSX = XLSX; //设置全局

3.给表格添加id,方便下面找到该节点

<el-table :data="historyTelemetryData" id="history-table">
        <el-table-column
          property="channel"
          label="通道"
          width="150"
        ></el-table-column>
        <el-table-column
          property="value"
          label="数据"
          width="200"
        ></el-table-column>
        <el-table-column property="time" label="时间"></el-table-column>
      </el-table>

4.点击按钮触发导出事件

<el-button type="primary" @click="exportTable">导出</el-button>

5.导出方法

exportTable() {
      //导出名称
      let excelName = "历史数据" + new Date().getTime() + ".xlsx";
      const xlsxParam = { raw: true }; //转化成Excel使用原始格式
      const table_book = this.$XLSX.utils.table_to_book(
        document.querySelector("#history-table"),
        xlsxParam
      );
      const table_write = this.$XLSX.write(table_book, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        this.$FileSaver.saveAs(
          new Blob([table_write], { type: "application/octet-stream" }),
          excelName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, table_write);
      }
      return table_write;
    },

6.导出成功