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

最新推荐文章于 2025-05-16 14:02:26 发布

前端进阶之路

最新推荐文章于 2025-05-16 14:02:26 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/gao000000/article/details/128704341

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装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-bu

最低0.47元/天解锁文章

200万优质内容无限畅学