将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值,然后重新设置获取后台数据方法的参数,拉取到所有符合条件的数据绑定进来,这样导出的就是想要的数据了。
 

上一篇:Vue 导出 excel


下一篇:js 将table中的数据导出为excel文件