ElementUI 导出表格数据xlsx

1.下载相应的依赖 （命令如下）

npm install --save xlsx file-saver  或  yarn add xlsx file-saver

2.下载完成后引入相应的插件

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

3.给el-table中定义一个id

<el-table
    :data="list"
    id="tableId"
    v-loading="loading">
</el-table>

4.导出数据xlsx  

4.1导出本页数据：

    exportData(){
      //转换成excel时，使用原始的格式
      var xlsxParam = { raw: true };
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#tableId").removeChild(fix),xlsxParam
        );
        document.querySelector("#tableId").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xls",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "表格名称.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

4.2导出分页的全部数据：

    //先查询出全部数据 - 导出表格后 - 恢复原来的数据
    async exportData2(){
      this.loading = true;
      this.form.page = 1;
      this.form.number = this.total; //数据总条数

      try {
        await this.getListData(); //请求页面数据的方法

        // 等待足够的时间以确保数据完全加载和渲染,可以根据实际情况调整等待时间
        await new Promise(resolve => setTimeout(resolve, 1000));

        // 确保数据完全加载并渲染后再执行导出功能
        await this.$nextTick();

        // 转换成excel时，使用原始的格式
        var xlsxParam = { raw: true };
        let fix = document.querySelector(".el-table__fixed");
        let wb;
        // 判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
        if (fix) {
          wb = XLSX.utils.table_to_book(
              document.querySelector("#tableId").removeChild(fix), xlsxParam
          );
          document.querySelector("#tableId").appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector("#tableId"), xlsxParam);
        }
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });

        try {
          FileSaver.saveAs(
              new Blob([wbout], { type: "application/octet-stream" }),
              "表格名字.xls"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;

      } finally {
        this.form.page = 1;
        this.form.number = 20;
        this.getListData(); //刷新数据
        this.loading = false;
      }
    },

4.3代码整合：

      //如果点击传2,导出全部数据；如果!=2 导出当前页面
      async exportData2(e) {
        try {
          this.loading = true;
          if (e == 2) { 
            this.form.page = 1;
            this.form.number = this.totalNum;
            await this.getData(); // 获取数据
            // 等待足够的时间以确保数据完全加载和渲染，可以根据实际情况调整等待时间
            await new Promise(resolve => setTimeout(resolve, 2000));
            // 确保数据完全加载并渲染后再执行导出功能
            await this.$nextTick();
          }

          // 转换成excel时，使用原始的格式
          var xlsxParam = { raw: true };
          let fix = document.querySelector(".el-table__fixed");
          let wb;
          // 判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
          if (fix) {
            wb = XLSX.utils.table_to_book(
                document.querySelector("#tableId").removeChild(fix), xlsxParam
            );
            document.querySelector("#tableId").appendChild(fix);
          } else {
            wb = XLSX.utils.table_to_book(document.querySelector("#tableId"), xlsxParam);
          }
          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") console.log(e, wbout);
          }
          return wbout;

        } finally {
          if (e == 2) {
            this.form.page = 1;
            this.form.number = 20;
            await this.getData(); // 还原数据 
          }
          this.loading = false;
        }
      },