vue2.0 + element UI 中 el-table 数据导出Excel 。

最新推荐文章于 2024-10-09 07:16:01 发布

置顶

oo灵性

最新推荐文章于 2024-10-09 07:16:01 发布

阅读量7.2w

点赞数 28

分类专栏： JavaScript 前端文章标签： vue2.0 el-table导出excel element UI 中el-table导出excel

本文链接：https://blog.csdn.net/u010427666/article/details/79208145

版权

本文介绍了如何在Vue2.0项目中，结合Element UI的el-table组件实现数据导出到Excel的功能。通过安装js-xlsx和FileSaver.js依赖，将表格DOM节点转换为工作簿，然后利用FileSaver.js保存为Excel文件。文中提供了具体的组件引入、方法编写步骤，并展示了导出效果。

摘要由CSDN通过智能技术生成

vue2.0 + element UI 中 el-table 数据导出Excel

1、 安装相关依赖

主要是两个依赖

npm install --save xlsx file-saver

如果想详细看着两个插件使用，请移步github。

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

2、组件里头引入

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

3、组件methods里写一个方法

     exportExcel () {
         /* generate workbook object from table */
         var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
         /* get binary string as output */
         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
     },