vue 导出Excel

我就是我 2022-03-02 01:20 234阅读 0赞

[原博主地址][Link 1]  [https://blog.csdn.net/u010427666/article/details/79208145][Link 1]

1、 **安装相关依赖**

主要是两个依赖

npm install --save xlsx file-saver

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

> [https://github.com/SheetJS/js-xlsx][https_github.com_SheetJS_js-xlsx]   
> [https://github.com/eligrey/FileSaver.js][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  
     \},

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

4、**点击导出按钮执行 exportExcel 的方法即可 。**

**组件里头代码[截图][Link 2]：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][]

代码如下：

// 数据导出  两个引用

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

//导出数据

**methods: \{**

//导出数据

exportExcel () \{

/\* generate workbook object from table \*/

var wb = XLSX.utils.table\_to\_book(document.querySelector('\#out-table'))   //out-tabl是在table里面设置的id（id = "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' \}), '数据导出.xlsx')

\} catch (e) \{ if (typeof console !== 'undefined') console.log(e, wbout) \}

return wbout

\},

[Link 1]: https://blog.csdn.net/u010427666/article/details/79208145
[https_github.com_SheetJS_js-xlsx]: https://github.com/SheetJS/js-xlsx
[https_github.com_eligrey_FileSaver.js]: https://github.com/eligrey/FileSaver.js
[Link 2]: https://www.baidu.com/s?wd=%E6%88%AA%E5%9B%BE&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: /images/20220302/eb84551adfd54b41a385b63d16176854.png