vue+elementUI el-table匯出excel表格

vue+elementUI el-table匯出excel表格

1. 安裝依賴庫：

npm install -D xlsx ,file-saver
npm install -s script-loader

2. 在專案的src資料夾下新建一個資料夾vendor：（vendor—名字任取），裡面放置兩個檔案Blob.js和 Export2Excel.js。這兩個檔案去這裡下載：點我下載

3. 在當前.vue檔案中引入相關依賴：

require('script-loader!file-saver'); //儲存檔案用
require('script-loader!vendor/Blob'); //轉二進位制用
require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

4. 更改webpack.base.conf.js配置

在resolve的alias中新增一段話： 'vendor': path.resolve(__dirname, '../src/vendor'),

5. 在.vue檔案中，methods中新增如下兩個方法：

    export2Excel() {
　　　　require.ensure([], () => {
　　　　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
　　　　　　const tHeader = ['序號','縣（村）編號IDA', '縣（村）名稱'];            // 對應表格輸出的title
　　　　　　const filterVal = ['', 'ida', 'cname'];                             // 對應表格輸出的資料
　　　　　　const list = this.dataList;
　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　export_json_to_excel(tHeader, data, '縣（村）基本資訊Excel表');                   //對應下載檔案的名字
　　　　})
　　},
　　formatJson(filterVal, jsonData) {
　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　}

6. 新建button。觸發export2Excel事件即可。

<el-button @click="export2Excel" type="success">匯出</el-button>