Vue + element-ui实现导出excel表

1、安装依赖

npm install --save xlsx file-saver

2、引入插件

<-- 在要导出的页面引入，或者在main中定义全局使用。我这里是在页面中直接引入 -->
import XLSX from "xlsx"

 3、导出按钮

<-- 普通的按钮，添加点击事件（避免重复点击） -->

<el-button 
    type="warning"
    plain
    size="mini"
    @click.stop.prevent="exportData"
>导出</el-button>

4、点击导出按钮触发exportData事件

this.$confirm("确定要导出列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          // getList 调用接口，从后台请求数据
          this.getlist();
          // this.arr是用后端请求到的数据
          this.exportNewList(this.arr);
      });

exportNewList(arr) {
      let tableData = [];
      var tabHandle = []; //导出表头
      // this.listItems 是表头数据
      this.listItems.forEach((item) => {
        tabHandle.push(item.label);
      }); //表头数组
      arr.forEach((item, index) => {
        let rowData = [];
        //导出内容的字段
        rowData = [
          item.USERPHONE,
          item.USERNAME,
          item.XDTIME,
          item.ORDERNUM,
          item.GOODSNAME,
          item.SHULIANG,
          item.DIZHI,
          item.STATUS,
          item.KUAIDI,
          item.KDDANHAO,
        ];
        tableData.push(rowData);
      });
      console.log(tableData)
      var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      let workSheet = XLSX.utils.json_to_sheet(tableData, xlsxParam);
      let bookNew = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(bookNew, workSheet, "订单"); // 工作簿名称
      let name = "订单列表.xlsx"; //表格名称
      XLSX.writeFile(bookNew, name); // 保存的文件名
    },