項(xiàng)目中使用了 element-UI 品腹,需要導(dǎo)出表格中的數(shù)據(jù)毒嫡,主要用到了兩個(gè)依賴:xlsx 观腊,file-saver 。
相關(guān)git : https://github.com/SheetJS/js-xlsx浙垫,https://github.com/eligrey/FileSaver.js
- 安裝依賴
npm install --save xlsx file-saver
- 組件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
- 添加一個(gè)方法
exportExcel () {
//在導(dǎo)出的過(guò)程中發(fā)現(xiàn)數(shù)字的格式發(fā)生了變化刨仑,可以通過(guò)添加參數(shù)解決
var xlsxParam = { raw: true };//轉(zhuǎn)換成excel時(shí),使用原始的格式
// 需要導(dǎo)出的table的DOM節(jié)點(diǎn)
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table')夹姥, xlsxParam)
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
// sheetjs 導(dǎo)出的文件名杉武,可以根據(jù)需要修改
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
- 執(zhí)行方法就可以得到表格對(duì)應(yīng)的數(shù)據(jù)。