一、table表格导出

**简单表格复杂合并表格都支持一键导出**

1、安装依赖：npm install xlsx file-saver -S

2、在需要导出功能的页面组件中引入

import FileSaver from "file-saver";
import XLSX from "xlsx";

3、Dom层，给需要导出的table标签el-table 或者a-table上加一个id：如outTable，对应下面的exportExcel方法中的 document.querySelector(‘#outTable‘)

 <a-table
          :columns="columns"
          :data-source="data"
          id="outTable"
          :pagination="false"
          bordered
          :scroll="{ x: 1700, y: 340 }"
        >
</a-table>

4、methods里面写方法:

exportExcel() {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "各储能电站运行收益周报表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;}

5、导出后的结果

image.png

踩坑记录：如果是fiexd固定列的table 直接用上面的方法会导致加了fiexd的列在表格多绘制一次，如下所示：

image.png

解决方案：此时我们只需找到加了fiexd的列 在导出前去除fiexd或者fiexd为false即可

image.png

columns:[
        {
          title: "序号",
          customRender: function (text, record, index) {
            return index + 1;
          },
          width: 70,
          fixed: "left",
          align: "center",
        },
        {
          title: "站点名称",
          dataIndex: "stationName",
          width: 100,
          fixed: "left",
          align: "center",
        },
        {
          title: "周充电成本（元）",
          children: [
            {
              title: "尖",
              dataIndex: "inSharpPrice",
              align: "center",
              width: 100,
            },
        ......
        //此处结构省略
]

由上图和columns结构得知前两列加了 fixed: "left"，我们改造下导出方法如下

exportExcel() {
    //有几列这里就改几列
      this.columns[0].fixed = false
      this.columns[1].fixed = false
      setTimeout(() => {
          var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
          var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
              "各储能电站运行收益周报表.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
         }
        //定位还原
        this.columns[0].fixed = "left"
        this.columns[1].fixed = "left"
          return wbout;}
       })
    

二、echarts导出

1、安装依赖：npm install xlsx --save

2、在需要导出功能的页面组件中引入

import XLSX from "xlsx";

3、重组数据，要导出echarts图表的数据只需要将数据结构重组成以下格式，通过数组导出excel

    var data = [

        ["id", "time", "value"],

        [1, "2022-06-07", 666.8],

        [2, "2022-06-08", 888.7]

      ];
      const ws= XLSX.utils.aoa_to_sheet(data);

      /* generate workbook and add the worksheet */
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

例子如下：
echarts如图所示：

image.png

image.png

image.png

如图所示我们需要遍历data和pointList拿到时间和每个电池簇对应的value值,做法如下：

plugins文件夹下封装xlsxFile.js

export default {
    /**
     * xlsx导出
     * @param {*} XLSX 核心api
     * @param {*} filename 文件名称
     * @param {object} data 数据源{key: Array}
     */
    xlsxFile(XLSX, filename, data) {
        // 创建workbook对象
        const wb = XLSX.utils.book_new();
        // 将srcData转换为worksheet
        for (let key in data) {
            const ws = XLSX.utils.aoa_to_sheet(data[key]);
            // worksheet 加入workbook
            XLSX.utils.book_append_sheet(wb, ws, key);
        }
        // 导出
        XLSX.writeFile(wb, `${filename}.xlsx`);
    }
};

页面引入

import * as XLSX from "xlsx";
import exportFile from "@/plugins/xlsxFile";

method：exportExce导出重组数据

exportExcel() {
            let th = ["时间"],
                max = 0;
            // 表头
            for (let item of this.chartData) {
                th.push(item.deviceName);
                if (item.pointList.length > max) max = item.pointList.length;
            }
            // 内容区
            let content = [];
            for (let i = 0; i < max; i++) {
                let row = [];
                for (let item of this.chartData) {
                    row.push(item.pointList[i].value);
                }
                row.unshift(this.chartData[0].pointList[i].time);
                content.push(row);
            }
            exportFile.xlsxFile(XLSX, "组电压", {
                组电压导出一览: [th, ...content],
            });
        },

导出结果

image.png