将element ui el-table中的数据导出到excel中

好久没有写博客了，差一点给它忘啦！今天遇到一个小需求 在后台管理中  需要将搜索到的数据 一键导出到excel中。需求虽然做出来，但是有一点点小问题。

首先

1.  下载第三方库：  
 

npm install --save xlsx file-saver

2.在放置需要导出功能的组件中引入

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

3.需要给el-table指定一个标示，就设置一个id

4.在methods中写入以下代码

exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        book: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

5.在点击导出按钮时  调用该函数

    // 导出excel
   

exportExcelBtn() {
      this.$confirm("您确定要将表格导出为excel???, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          this.exportExcel();
        })
        .catch(() => {});
    },

缺点:
1、如果存在分页，导出时却只导出当前table绑定的数据，假如我们设置的table每页只有10条数据，导出时只导出了10条，并非所有符合条件的数据

原因：此插件只导出当前table中所有的数据

解决办法：在HTML代码中再加一个el-table标签，这个table专门用来导出数据，且此table一直隐藏着，当查询条件发生变化时，根据后台返回的所有符合条件的数据总量total值，然后重新设置获取后台数据方法的参数，拉取到所有符合条件的数据绑定进来，这样导出的就是想要的数据了。
 

标签：wbout,el,xlsx,excel,导出,element,table,数据
来源： https://blog.csdn.net/are_gh/article/details/120397219