vue中匯出Excel表格
阿新 • • 發佈:2018-12-10
專案中我們可能會碰到匯出Excel檔案的需求,一般後臺管理系統中居多,將table中展示的資料匯出儲存到本地。當然我們也可以通過一些處理來修改要匯出的資料格式,具體需求具體對待。
1、首先我們需要安裝3個依賴,file-saver
、xlsx
和script-loader
。
使用npm安裝:
npm install file-saver xlsx -S
npm install script-loader -D
使用yarn安裝:
yarn add file-saver xlsx -S
yarn add script-loader -D
2、在/src
目錄下新建一個vendor
(名字也可自取)資料夾,存入Blob.js
Export2Excel.js
檔案。
這個兩個檔案你可以直接戳這裡 CSDN下載
有積分就1積分支援一下,沒有也可以去我的 github下載
當然也可以自行下載,或許會有版本的問題吧。
3、在/build/webpack.base.conf.js
中新增一行程式碼(vendor的名字必須和第二步新建的資料夾名字相同)。
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'vendor': path.resolve(__dirname, '../src/vendor') // 新增這一行 } }
4、在vue專案中的使用。
/** * excel匯出 */ exportTable () { // this.DefaultData.exportExcelMax限制一下匯出的總條數 if (this.totals <= this.DefaultData.exportExcelMax) { this.$confirm('確定要匯出當前<strong>' + this.totals + '</strong>條資料?', '提示', { dangerouslyUseHTMLString: true, confirmButtonText: '確定', cancelButtonText: '取消' }).then(() => { this.getExpportData() }).catch(() => { }) } else { this.$confirm('當前要匯出的<strong>' + this.totals + '</strong>條資料,資料量過大,不能一次匯出!<br/>建議分時間段匯出所需資料。', '提示', { dangerouslyUseHTMLString: true, showCancelButton: false }).then(() => { }).catch(() => { }) } }, /** * 對匯出資料格式處理 */ formatJson (filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j])) }, /** * 匯出的列表資料 */ getExpportData: function () { const loading = this.$loading({ lock: true, text: '正在匯出,請稍等......', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) const data = { phoneNo: this.formInline.phoneNo, userName: this.formInline.userName, amount: this.formInline.amount, fee: this.formInline.fee, currentPage: this.currentPage, pageSize: this.DefaultData.exportExcelMax } // 這裡封裝了axios,根據自身情況修改即可 this.http( this.ApiSetting.orderExport, data ).then((res) => { // handleDataList這裡可以對匯出的資料根據需求做下處理 const handleDataList = res.data.list for (let i in res.data.list) { handleDataList[i].amount = res.data.list[i].amount * 100 handleDataList[i].fee = res.data.list[i].fee + '%' } if (res.data.list.length > 0) { require.ensure([], () => { /* eslint-disable */ // 這裡的徑路要修改正確 const { export_json_to_excel } = require('../../vendor/Export2Excel') /* eslint-enable */ // 匯出的表頭 const tHeader = ['手機號碼', '使用者姓名', '交易金額', '手續費'] // 匯出表頭要對應的資料 const filterVal = ['phoneNo', 'userName', 'amount', 'fee'] // 如果對匯出的資料沒有可處理的需求,把下面的handleDataList換成res.data.list即可,刪掉上面相應的程式碼 const data = this.formatJson(filterVal, handleDataList) // this.DefaultData.formatLongDate.getNow()自己寫的一個獲取當前時間,方便查詢匯出後的檔案。根據需求自行可處理。 export_json_to_excel(tHeader, data, '訂單查詢列表-' + this.DefaultData.formatLongDate.getNow()) this.$message({ message: '匯出成功', duration: 2000, type: 'success' }) }) } else { this.$message({ message: '資料出錯,請聯絡管理員', duration: 2000, type: 'warning' }) } loading.close() }, error => { console.log(error) loading.close() }) }
在需要匯出功能的頁面加入上面三個方法,修改好需要注意的事項,匯出Excel表格就ok了。