vue 表格導出excel

首先要install兩個依賴， 

1 npm install -S file-saver xlsx

2  npm install -D script-loader

在項目src目錄下新建一個文件夾vendor（名字隨意），在此文件夾下放置兩個文件Blob.js和Export2Excal.js（下載地址：http://files.cnblogs.com/files/wangyunhui/vendor.rar）

 

 <export2Excel v-if="export2Excelshow" @closeExce = "export2Excelshow=false" :tebleDateAll= "tebleDateAll" :tebleDate= "tebleDate" :tebleTop="tebleTop"></export2Excel>

　　

:tebleDateAll /:tebleDate  表格主體部分          :tebleTop  表格的標題部分

數據格式爲


tebleDate：[
{n1:"n1",n2:"n2",n3:"n3",n4:"n4",n5:"n5",n6:"n6"},
{n1:"n1",n2:"n2",n3:"n3",n4:"n4",n5:"n5",n6:"n6"}
]



tebleTop:["n1","n2","n3","n4","n5","n6"]

　　

vue 組件內方法

 

export default {
  data() {
    return {
      excelTitle:"新建文件" // 文件名稱
    };
  },

 
  props:["tebleDateAll","tebleDate","tebleTop"],
  methods: {

export2Excel() {

    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
   

     require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = this.tebleTop
        const filterVal = （list 中對應的屬性名稱）;
        const list = this.tebleDate;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, this.excelTitle);
      });
    }
}
  }
};

　　

增長一個點擊事件 ，激活表格

 

 

 

<button @click="export2Excel">確認導出</button>