vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法

1、安裝相關(guān)依賴

主要是兩個依賴

npm install --save xlsx file-saver

如果想詳細(xì)看著兩個插件使用，請移步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
},

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 節(jié)點 ) ，sheetjs.xlsx 即為導(dǎo)出表格的名字，可修改！

4、點擊導(dǎo)出按鈕執(zhí)行 exportExcel 的方法即可 。

組件里頭代碼截圖：

實現(xiàn)效果圖如下：

導(dǎo)出如下表格的數(shù)據(jù)到excel。

導(dǎo)出到excel 表格，結(jié)果如下：

相關(guān)鏈接：

該工具的其他使用場景( 如react 、jQ、angular ) http://sheetjs.com/

以上這篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com