vue导出excel表

最新推荐文章于 2025-05-14 09:14:01 发布

原创

最新推荐文章于 2025-05-14 09:14:01 发布 · 1.6w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue #导出Excel #js

本文介绍了两种在Vue2.0+Element UI环境中将el-table数据导出为Excel的方法。第一种方法引用了相关教程；第二种方法包括安装Blob.js和Export2Excel.js，创建vendor文件夹并引入文件，然后在Vue组件内编写导出方法，特别提到导出的文件格式处理，使用了date-fns库来格式化时间。

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

方法一：vue2.0 + element UI 中 el-table 数据导出Excel 。https://blog.youkuaiyun.com/u010427666/article/details/79208145

方法二：

1.安装2个依赖包（其实是3个）

 npm install -S file-saver xlsx

npm install -D script-loader

2.在项目中新建一个文件夹 vendor（随便取的名字）

放进2个文件：Blob.js与Export2Excel.js

3.在.vue文件中写方法（现在是根据所选从后台拿数据的写法）：

exportTemplate: function() {
this.loading = true
if (this.multipleSelection.length) { //根据选中的某条数据进行导出
const ids = []
this.multipleSelection.forEach(function (item) { //拿到某条数据的订单编号传给后台
ids.push(item.orderId)
})

exportExcel({ 
ids: JSON.stringify(ids) //给后台的数据格式是ids:[321,322,323]
})
.then((res) => {

// 拿到数组，向后台请求数据。

import('@/vendo