纯前端代码实现element表格数据导出excel

项目需要实现通过导出按钮，将表格数据导出excel。

通常是由后端来完成这项功能，前端请求接口并导出。但是对于本页面按钮的功能说明，只需要导出当前显示的数据，因此可以通过纯前端代码实现表格导出，不需要后端做任何处理。

功能实现背景:elment UI + VUE

下面是详细步骤：

1、下载依赖包

npm install -S file-saver xlsx

或者

npm install xlsx
npm install file-saver --save

2、在页面中引用依赖

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

3、给要导出的表格绑定一个ID选择器，给查询按钮绑定事件

id="tableExcel"

@click="handleExport"

4、编写绑定的事件handleExport代码

注意我这里为了调确认框，简单封装了个函数exportExcel。另外事件名字和选择器名字要改的话在template和js中要同步修改，导出文件名为“查询结果.xlsx”，也可以自定义自行修改。

    /** 导出按钮操作 */
    exportExcel () {
      let fix = document.querySelector(".el-table__fixed-right");
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      if (fix) {
        //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
        wb = XLSX.utils.table_to_book(
          document.querySelector("#tableExcel").removeChild(fix)
        );
        document.querySelector("#tableExcel").appendChild(fix);
      } else {
        // wb = XLSX.utils.table_to_book(document.querySelector('#tableExcel'));
        var wb = XLSX.utils.table_to_book(
          document.querySelector("#tableExcel"),
          xlsxParam
        );
      }
      /* get binary string as output */
      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;
    },
    handleExport () {
      this.$confirm("是否确认导出所有用户数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.exportExcel()
      }).catch((rej) => {
        console.log(rej);
      })
    },

至此代码就完成了，可以调试下看能否正常导出想要的excel。

当然还有其他办法，还请小伙伴们评论中多多赐教。