使用vue導出excel文件

今天再開發中遇到一件事情，就是怎樣用已有數據導出excel文件，網上有許多方法，有說用數據流的方式，http://www.javashuo.com/article/p-ntzigqxu-gk.html，可是如今個人想法是隻是用數組數據，不接著與數據流的方式去實現，事實證實是能夠的：

1.安裝依賴

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

2.在main.js中進行導入Bolb.js與Export2Excel.js

兩個js文件地址：

連接：https://pan.baidu.com/s/1ib2Ox18FngVlhKxs6l8OZQ
提取碼：sirm

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

　　

 

3.在組件中使用

//導出的方法
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中存放表格裏的數據，類型爲數組，裏面存放對象，表格的每一行爲一個對象。

如此，就能夠了。