將頁面中表格數據導出excel格式的文件（vue）

　　近期由於項目需要，需要將頁面中的表格數據導出excel格式的文件，折騰了許久，在網上各種百度，雖然資料不少，但是大都不全，踩了許多坑，總算是皇天不負有心人，最后圓滿解決了。

　　1、安裝相關依賴(npm安裝可能會出現某些錯誤，可以使用cnpm)：

npm install file-saver --save   // 保存文件用
npm install xlsx --save    // 轉二進制用
npm install script-loader --save-dev    // xlsx核心文件

　　

　　2、下載兩個核心js文件，Blob.js和 Export2Excel.js  下載地址：Blob.js和 Export2Excel.js文件

　　

　　3、在src目錄下新建vendor文件夾，將Blob.js和 Export2Excel.js放進去。

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

　　在resolve的alias里添加如下代碼：

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

　　5、在需要導出excel格式文件的頁面中寫入以下兩個方法，如：

methods: {
    formatJson(filterVal, jsonData) {
　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　},
    export2Excel() {
      const _this = this
　　　require.ensure([], () => {
  　　　const { export_json_to_excel } = require('../vendor/Export2Excel');
  　　　const tHeader = ['ID', '封面', '小說名','二級分類','作者','進度','更新時間', '狀態'];
  　　　const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];
  　　　const list = _this.dataList;
  　　　const data = _this.formatJson(filterVal, list);
  　　　export_json_to_excel(tHeader, data, '小說列表');
　　　})
    }
  }

　　注意：tHeader表示表頭的標題，filterVal表示表頭的字段名，可通過點擊事件調用導出方法。

<button type="primary" @click="export2Excel">導出</button>