vue结合ElementUI做table数据导出Excel

最新推荐文章于 2024-07-15 14:11:24 发布

昆明猫咪科技创始人

最新推荐文章于 2024-07-15 14:11:24 发布

阅读量346

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_40103332/article/details/96476735

vue 同时被 2 个专栏收录

8 篇文章

订阅专栏

elementui

3 篇文章

订阅专栏

本文介绍如何在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>