vue匯出資料excel
阿新 • • 發佈:2020-12-15
- 下載兩個依賴
npm install file-save xlsx
-
建立兩個檔案
Blob.js
與Export2Excel.js
參考地址:檔案地址
-
在
Export2Excel.js
中修改引入地址,注意地址的路徑,沒有script-loader依賴的話就去npm install script-loader -D
下載該依賴
-
在vue檔案中使用
引入檔案:
import {
export_json_to_excel
} from '@/plugins/Export2Excel'
點選按鈕時匯出檔案
<a-button @click="exportExcel">匯出</a-button> exportExcel() { const excelHeader = this.columns.map(item => item.title) const keys = this.columns.map(item => item.dataIndex) const excelData = this.dataSource.map(item => keys.map(i => item[i] || '')) const excelName='人員資訊表' export_json_to_excel(excelHeader, excelData, excelName) },
-
對於export_json_to_excel()中幾個變數的解釋
excelHeader為匯出資料的表頭 excelHeader=['年齡','性別','姓名']
excelData為匯出的資料 excelHeader=[ {16,'男','tom'}, {17,'男','jim'} {12,'男','jon'} {16,'男','king'} ] //資料的順序與表頭一致
excelName:表的名字