vue-cli3實現將數據導出為Excel表

第一步，安裝依賴

  npm i -S file-saver xlsx

  npm i -S script-loader

 第二步，下載所需要的兩個js文件Blob.js和Export2Excel.js

 

第三步，在vue項目中創建文件夾為vendor，並將兩個文件放在一起

 

 

 注：放置文件可根據自己喜好來，但注意路徑，其中Export2Excel.js中需要導入Blob文件，若與本文不同請記得修改路徑

 

 

 圖為Export2Excel.js

 

第四步：在vue文件內使用，添加兩個方法

直接上代碼：

<template>

  <div>

     <button @click="exportData">導出數據</button>

  </div>

</template>

 

data () {
      return {
        tableData:[
          { row1:'123', row2:'111', row2:'112', },
         { row1:'123', row2:'111', row2:'112', },
         { row1:'123', row2:'111', row2:'112', },
         { row1:'123', row2:'111', row2:'112', },
          { row1:'123', row2:'111', row2:'112', },
        ]
      };
    },
    methods: {
     exportData(){
                 const { export_json_to_excel } = require('@/vendor/Export2Excel');
                 const tHeader = ['列1', '列2', '列3'];
                 const filterVal = ['phone','wechatNum','status'];
                 const list = this.tableData;
                 const data = this.formatJson(filterVal, list);
                 export_json_to_excel(tHeader, data, 'fileName');
         },
 
         formatJson(filterVal, jsonData) {
             return jsonData.map(v => filterVal.map(j => v[j]))
         }
    },