element的table中的数据导出成Excel文件

最新推荐文章于 2024-08-24 10:01:39 发布

八月的猪猪

最新推荐文章于 2024-08-24 10:01:39 发布

阅读量547

点赞数

分类专栏：前端文章标签：导出Excel element table

本文链接：https://blog.csdn.net/qq_42894622/article/details/90068521

版权

前端专栏收录该内容

123 篇文章 3 订阅

订阅专栏

个人blog，欢迎关注加收藏
1.安装插件
a.npm install xlsx:Excel文件插件
b.npm install file-saver –save：将element的table数据导出的插件
2、组件里头引入

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

3、组件methods里写一个方法

 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
 },

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！

4、点击导出按钮执行 exportExcel 的方法即可。
组件里头代码截图：