1. 程式人生 > >將頁面中表格數據導出excel格式的文件(vue)

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

表示 webpack ade bpa upd 調用 clas 使用 目錄

  近期由於項目需要,需要將頁面中的表格數據導出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>

  

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