element ui的el-table导出当前页为excel，纯前端实现，并导出指定列

最新推荐文章于 2024-07-26 12:25:22 发布

前端进阶之路

最新推荐文章于 2024-07-26 12:25:22 发布

阅读量897

点赞数 2

分类专栏： vue element ui 文章标签：前端 excel vue.js

本文链接：https://blog.csdn.net/gao000000/article/details/128704341

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

element ui

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中利用xlsx库导出表格数据，包括基本的导出步骤和如何筛选指定列进行导出。通过处理tableData，创建需要的列并转换为工作表，然后写入文件，实现了自定义列的Excel导出功能。

摘要由CSDN通过智能技术生成

首先安装xlsx库：npm install xlsx

然后导入xlsx：import * as XLSX from “xlsx”

1.在导出button上添加导出事件

 <el-button size="mini" class="none-radius" @click="handleExport"
   >导出</el-button
 >

在methods里写导出事件

	handleExport() {
	   const options = { raw: true };
	   const workbook = XLSX.utils.table_to_book(
	     this.$refs.multipleTable.$el,
	     options
	   );
	   return XLSX.writeFile(workbook, "文件名.xlsx", { type: "binary" });
	 },

这个时候就已经实现最基本的导出了！！！这个是我目前找到的最简单的导出方式了！

接下来如果需要导出指定列该怎么办呢？（因为有些表格列是序号或者图片什么的，这样按照上面的导出方式进行导出则会显示空白列，那如何把不需要的列删掉？或者只导出我们需要的列呢？请继续往下看）

首先安装xlsx库：npm install xlsx

然后导入xlsx：import * as XLSX from “xlsx”

1.在导出button上添加导出事件

 <el-button size="mini" class="none-radius" @click="handleExport"
   >导出</el-button
 >

这些步骤都是一样的，重点在handleExport这个方法上

handleExport() {
      let arrList = [];
      for (var i = 0; i < this.tableData.length; i++) {
        var needDownloadColumns = {
          意见: this.tableData[i].reviewType,
          时间: this.tableData[i].reviewerCommitTime
        };
        arrList.push(needDownloadColumns);
      }
      this.handleExportTableData(arrList);
    },
    handleExportTableData(arrList) {
    // 这里的needDownloadColumns要和Header 的列名字保持一致
      const Header = [
        [
          "意见",
          "时间"
        ]
      ];
      // 将JS数据数组转换为工作表。
      const headerWs = XLSX.utils.aoa_to_sheet(Header);
      const ws = XLSX.utils.sheet_add_json(headerWs, arrList, {
        skipHeader: true,
        origin: "A2"
      });
      // 新建空的工作表 
      const wb = XLSX.utils.book_new();
      // 可以自定义下载之后的sheetname
      XLSX.utils.book_append_sheet(wb, ws, "sheetName");
      // 生成xlsx文件
      XLSX.writeFile(wb, "文件名.xlsx", { type: "binary" });
    },

这样就可以了！