vue结合ElementUI做table数据导出Excel

本文介绍如何在Vue项目中结合ElementUI实现表格数据导出为Excel的功能。通过安装xlsx和file-saver依赖,利用XLSX.utils.table_to_book将DOM节点转换为Excel工作簿,并使用FileSaver保存文件。

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

在项目的开发过程中,用的ElementUI做table数据渲染,其中数据导出Excel是经常会用到的,那该怎么做呢?

vue结合ElementUI做table数据导出Excel的方法:

第一步:安装依赖

npm install --save xlsx file-saver

插件的使用参考:

https://github.com/SheetJS/js-xlsx 
https://github.com/eligrey/FileSaver.js

第二步:组件头部引入

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

第三步:写个导出Excel的方法

<el-table :data="list" id="out-table">
</el-table>
/**
 * 导出Excel
 */
exportExcel(){
  var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: 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
},

注意这里:
1、XLSX.uitls.table_to_book:是table的DOM节点
2、sheetjs.xlsx 是导出的文件名

第四步:点击导出就可以了

<el-button class="filter-item" size="mini" @click="exportExcel">导出Excel</el-button>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值