前端vue+element ui實現數據表格導出excel

前端開發過程中常用的功能，數據導出excel，本文代碼demo採用前端框架vue+element ui

來實現，安裝依賴 npm install --save xlsx file-saver

在需要用到的組件中引入

1. import FileSaver from "file-saver";
2. import XLSX from "xlsx";

代碼如下：

methods:{

exportExcel () {

var xlsxParam = { raw: true };//使用原始格式，解決過長的數字自動轉化為科學計數法

var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'),xlsxParam)

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

},

}

代碼中out-table為table容器的id

之前由於截圖不清晰，重新貼上代碼