安裝依賴

進入項目文件夾，打開cmd或者在Webstorm中的Terminal中輸入：

npm install -S file-saver xlsx npm install -D script-loader

添加js文件

下載所需的兩個文件：Blob.js、Export2Excel.js

https://download.csdn.net/download/badao_liumang_qizhi/10767801

新建vendor，名稱不一定非是vendor，建議但不非得將此目錄放在與單頁面同級的目錄。將上面兩個js文件放在vendor目錄中。

比如：

這里要使用的單頁面是merchantBIllFlow.vue,所以在此同級目錄下新建vendor目錄，將上面兩個js文件放在此目錄下。

?

修改配置文件

在項目目錄下的build下的 webpack.base/conf.js這個webpack的配置文件中的

resolve的alias中加入：

'vendor':path.resolve(__dirname,'../src/views/account/vendor'),

具體路徑根據實際而寫，這里是按照我的方式寫的路徑。

如下：

實現代碼

點擊導出按鈕

<el-button type="primary" class="mt_0 ml_1em? bg_gray_777" @click="exportClick()">導出賬單</el-button>

實現查詢方法

在methods中

//報表導出前的查詢exportClick(){this.loading = true;//緩沖條加載//此代碼實現向后臺異步請求數據exportMerchantBill(this.billForm).then(response => {this.loading = false;const data = response.data;//聲明常量data用來接收后臺返回的數據datathis.exportList = data;//將接受到的data數據賦給exportList這個列表，用于當作導出Excel的數據源//開始執行導出方法，此方法要放在括號里面，因為是異步請求數據，請求完才能執行導出this.export2Excel()}).catch(error => {debugger;this.loading = falseconsole.log(error)})},

執行以上代碼要在data中添加exportList[]：

data(){return{//要導出的報表的listexportList:[],}}

說明：

以上代碼用來請求后臺來獲取一個要顯示內容的list，但是為了快速實現效果，可以自己聲明一個list，如下

導出Excel代碼

繼上面執行查詢數據后，開始執行導出Excel的方法： this.export2Excel()

在methods中新建方法：

繼上面請求后臺數據的版本

?methods: {export2Excel() {require.ensure([], () => {const { export_json_to_excel } = require('vendor/Export2Excel');const tHeader =['賬單名稱', '訂單編號', '交易編號','交易類型','交易方式','交易金額','交易前金額', '交易后金額'];const filterVal =['transactionName', 'orderNum','transactionNum','transactionTypeName','payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',];const list = this.exportList;const data = this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '**報表'+moment(new Date()).format('YYYYMMDDHHmmss'));})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},

簡單的版本

?

methods: {export2Excel() {require.ensure([], () => {const { export_json_to_excel } = require('vendor/Export2Excel');const tHeader =['編號', '標題', '作者','回顧', '時間'????];const filterVal =['id', 'title','author','pageviews','display_time'];??const list =[{id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},{id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},{id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},];const data = this.formatJson(filterVal, list);???????export_json_to_excel(tHeader, data, '**賬單報表'+moment(new Date()).format('YYYYMMDDHHmmss'));})},formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},

說明：

1.const tHeader：這是excel表中要顯示的標題頭，即最上面那一行，這是根據具體業務需求設置的。

2.const filterVal ：這是excel下面對應標題頭要顯示的具體內容，要與list中的相對應，比如簡單版本中與id、title等對應。

?? 如果是請求后臺返回一個實體類的list，那么這個要與實體類的屬性相對應。

3.?export_json_to_excel(tHeader, data, '**賬單報表'+moment(new Date()).format('YYYYMMDDHHmmss'))如果要修改導出報表的名字，就將

??? **賬單報表修改成自己需要的，后面的是要實現時間戳，通過moment來將當前時間進行格式化為時間字符串，防止導出時重名。

4.關于導出的Excel具體顯示的內容，就是要給它傳遞一個list，不管是自己手動編寫list，還是請求后臺返回的list。只需要修改

‘const list = ’這個后面的內容給list 賦值即可。通過修改還可以將Element ui中的表格中data屬性所對應list進行導出，從而實現將表格導出為Excel的操作。

?? 但是這樣只能導出一頁的數據，所以要重新編寫請求后臺的接口。來返回一個list用于前端導出Excel。

效果

?

總結

以上是生活随笔為你收集整理的Vue实现在前端导出Excel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。