[前端筆記] Vue頁面table導出Excel

本次導出針對於頁面table導出!

1、安裝三個依賴包

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

2、在項目中創建一個文件夾（比如utils，一般是在src目錄下創建）

把Blob.js和 Export2Excel.js這兩個文件夾放到新建的文件夾內

文件已經打包好...

送你傳送門

Exprot2Excle.js

 中我加了這麼一段代碼,原因是在Exprot2Excle.js中由於這幾個文件不支持import引入，所以我們需要`script-loader`來將他們掛載到全局環境下

require('script-loader!file-saver'); //保存文件用
 require('script-loader!utils/Blob'); //轉二進制用(此處需映射到自己下載的blob.js文件)
 require('script-loader!xlsx/dist/xlsx.core.min'); //xlsx核心

3、在頁面中使用

 

html

<button type="button" class="btn btn-primary" @click="export2Excel">導出excel</button>

 js

export2Excel () {
    require.ensure([], () => {
      const { export_json_to_excel } = require('../utils/Export2Excel')
      const tHeader = ['日期', '豬隻代碼', '胎次', '淘汰類型', '淘汰原因', '淘汰狀態', '品種', '入場時間', '所在農場', '舍']
      const filterVal = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K']
      const list = this.datas
      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]))
}

ps:此處的list對應的 this.datas.就是我們從後臺查詢返回回來的數據..filterVal是我們每一列映射的值.tHeader是表頭..此處需要注意的是Excport2Excel文件的路徑問題.

 

送你傳送門