vue 導出excel表格實踐

本文參考https://github.com/daoyuly/export2excel-demo

• vue導出Excel，依賴於如下兩個插件

  cnpm install --save xlsx file-saver
  
  cnpm install -D script-loader

   

•  插件安裝後：需要建立一個vendor文件夾，有如下兩個js
• 使用，書寫導出方法

    exportExcel(){
        require.ensure([], () => {
          const { export_json_to_excel } = require('../vendor/Export2Excel'); //這裏必須使用絕對路徑
          const tHeader = ['車牌號', '司機', '運載類型', '方量', '進出', '單位', '時間']//表頭信息
          const filterVal = ['CARNUMBER', 'DRIVER', 'CARTYPE', 'SQUARE','INOUTFLAG','DEPARTMENT','INOUTTIME']//對應表頭的字段名
          const list = this.totalList;
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '進出管理列表');// 導出的表格名稱，根據需要自己命名
        })
       },
       formatJson(filterVal, jsonData){
       	return jsonData.map(v =>{
      	  return filterVal.map(j => v[j])
          })
       },

   

• 結果：
• 項目demo 地址：https://github.com/hongkangling/vue