Vue實現在前端導出Excel

安裝依賴

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

1.  
   npm install -S file-saver xlsx
2.  
   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中

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

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

1.  
   data(){
2.  
    
3.  
   return{
4.  
    
5.  
   //要導出的報表的list
6.  
           exportList:[],
7.  
    
8.  
   }
9.  
    
10.  
    }

說明：

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

導出Excel代碼

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

在methods中新建方法：

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

1.  
    methods: {
2.  
         export2Excel() {
3.  
           require.ensure([], () => {
4.  
             const { export_json_to_excel } = require('vendor/Export2Excel');
5.  
             const tHeader =
6.  
               [ '賬單名稱', '訂單編號', '交易編號','交易類型',
7.  
                 '交易方式','交易金額','交易前金額', '交易后金額'
8.  
               ];
9.  
             const filterVal =
10.  
                [ 'transactionName', 'orderNum','transactionNum','transactionTypeName',
11.  
                 'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',
12.  
                ];
13.  
     
14.  
              const list = this.exportList;
15.  
               const data = this.formatJson(filterVal, list);
16.  
              export_json_to_excel(tHeader, data, '**報表'+moment(new Date()).format('YYYYMMDDHHmmss'));
17.  
            })
18.  
          },
19.  
          formatJson(filterVal, jsonData) {
20.  
            return jsonData.map(v => filterVal.map(j => v[j]))
21.  
          },

簡單的版本

 

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

說明：

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。

效果

 

 

http://www.pianshen.com/article/613969950/