vue中匯出excel
阿新 • • 發佈:2018-12-21
1、安裝依賴包
npm install js-xlsx file-saver -S
npm install script-loader -S -D //它幫我們掛載了,不需要引入到main.js裡面
2、一般都是在專案src中建立一個資料夾vendor
把Blob.js和 Export2Excel.js這兩個資料夾放到新建的資料夾內
可在網盤中提取
提取碼:gu38
data() { return { tableData: [],//存放的table資料 list: null, filename: '', autoWidth: true, bookType: 'xlsx' } }, //exportExcel點選匯出的按鈕方法 exportExcel(){ import('@/vendor/Export2Excel').then(excel => { const tHeader = ['平臺代付訂單號', '商戶代付訂單號', ' 戶名', '卡號','開戶行','銀行賬戶型別','代付商戶編號','代付金額','交易狀態','建立時間']//excel表頭 const filterVal = ['orderno', 'torderno', 'accountname', 'cardno','openbank','cardaccounttype','acqmerchantno','amount','status','createtime']//table裡對應的某個值 const list = this.tableData //要匯出的資料 const data = this.formatJson(filterVal, list) excel.export_json_to_excel({ header: tHeader, data, filename: this.filename, autoWidth: this.autoWidth, bookType: this.bookType }) }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => { if (j === 'timestamp') { return parseTime(v[j]) } else { return v[j] } })) },
引數
本篇文章是由於專案需要,參考https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html#excel-export
如果大家有任何疑問請給我留言,小編會及時回覆大家的。