之前也看過導出訂單項目，但是一直沒有實現過，最近剛好有需求要做這個功能！
也去網上看了一些博客，參考了2個比較詳細的，最後實現了效果
第一步：安裝依賴（三個步驟缺一不可）
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
tips：之前少了第三步驟，後面一直報錯，然後重新安裝了依賴，才正常！如果你裝的是淘寶鏡像，那麼把npm換成cnpm即可！
第二步：下載2個js文件：Blob.js和 Export2Excel.js
下載鏈接：https://download.csdn.net/download/liuxiaoxiaosmile/10345153?utm_source=bbsseo
新建vendor，名稱不一定非是vendor，將上面兩個js文件放在vendor目錄中，可以把vendor放在src目錄下
tips：網上很多鏈接裏面點進去下載都要C幣，這個是免費的，但是下載的同時會綁定下載一些應用，到時候卸載即可！也可以自己去網上找免費的文件下載
第三步：更改webpack.base.conf.js配置，根據你自己的實際文件路徑設置，效果如下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'vendor':path.resolve(__dirname,'../src/vendor'),
}
},
第四步：頁面實現
<el-button type="success" @click="exportClick" style="margin: 0 60px 0 20px;">導出訂單</el-button>
js：
exportClick(){
console.log('導出excel')
this.loading = true;//緩衝條加載
//此代碼實現向後臺異步請求數據
exportMerchantBill(this.billForm).then(response => { //換成你自己的請求接口，然後再執行this.export2Excel()
this.loading = false;
const data = response.data;//聲明常量data用來接收後臺返回的數據data
this.exportList = data;//將接受到的data數據賦給exportList這個列表，用於當作導出Excel的數據源
//開始執行導出方法，此方法要放在括號裏面，因爲是異步請求數據，請求完才能執行導出
this.export2Excel()
}).catch(error => {
this.loading = false
console.log(error)
})
},
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader =[ '時間', '店主名稱/手機','類型','詳情','實收金額','消費者名字/手機號', '訂單號'];
//定義表頭
const filterVal =['time', 'storer_info','type_desc','goods_info','money','user_info', 'out_trade_no'];
//這個是要導入報表的字段，需與表頭對應
const list = this.exportList;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '你的報表名稱'+new Date());
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
做完以上步驟，就全部操作完成，即可實現導出excel表格
參考文檔1：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83789067
參考文檔2：https://segmentfault.com/a/1190000012117303
