vue.js中使用Export2Excel導出Excel表格

有一個項目需求，要求在前端項目中導出Excel表格，經過查找代碼,Vue.js確實可以實現，具體實現步驟爲：

1. 安裝依賴

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

2. 導入兩個JS
   下載Blob.js和Export2Excel.js，在src目錄下新建Excel文件夾，裏面放入Blob.js和Export2Excel.js兩個JS文件
   
3. main.js 引入文件

import Blob from './excel/Blob'
import Export2Excel from './excel/Export2Excel.js'

4. 組件中使用

methods中添加

//導出的方法
exportExcel() {
  require.ensure([], () => {
    const { export_json_to_excel } = require('../excel/Export2Excel');
    const tHeader = ['序號', '暱稱', '姓名'];
    // 上面設置Excel的表格第一行的標題
    const filterVal = ['index', 'nickName', 'name'];
    // 上面的index、nickName、name是tableData裏對象的屬性
    const list = this.tableData;  //把data裏的tableData存到list
    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]))
}

tHeader是表頭，filterVal 中的數據是表格的字段，tableData中存放表格裏的數據，類型爲數組，裏面存放對象，表格的每一行爲一個對象。

tableData 中的值爲：

data () {
    return {
      tableData: [
        {'index':'0',"nickName": "沙灘擱淺我們的舊時光", "name": "小明"},
        {'index':'1',"nickName": "女人天生高貴", "name": "小紅"},
        {'index':'2',"nickName": "海是彩色的灰塵", "name": "小蘭"}
      ]
    }
  }

5. 查看效果
   

如果運行時，報如下所示的錯誤：

這是因爲Export2Excel.js的設置需要改下：

注： 把require(‘script-loader!vendor/Blob’)改爲 require(’./Blob.js’)