vue項目導出EXCEL功能

由於一些緣由導出EXCEL功能必須前端來作，因此就研究了一下，在網上也找了一些文章來看，有一些不完整，我作完了就記錄下來，供你們參考：

一、首先先安裝依賴：

npm install file-saver xlsx --save
npm install script-loader --save-dev

二、下載須要的兩個js插件，Blob.js和 Export2Excel.js。這兩個文件在別的文章裏面有下載地址，很好找。在src/目錄下新建一個vendor，將這兩個文件放到裏面。

三、修改webpack.base.conf.js配置：

      在resolve.alias下面加上：

'vendor': path.resolve(__dirname, '../src/vendor')

　'../src/vendor' 是vendor的所在位置。

四、配置好之後，開始寫代碼：

我用的模擬數據，

<el-button type="warning" icon="el-icon-download" size="small" @click="exportExcel">導出EXCEL</el-button>

　　

data () {
  return {
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀區金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀區金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀區金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀區金沙江路 1516 弄'
    }]
  }
}

　　

formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel () {
  require.ensure([], () => {
    const { export_json_to_excel } = require('../../vendor/Export2Excel') // 路徑若是不一樣本身修改
    const tHeader = ['日期', '姓名', '地址'] // 表頭
    const filterVal = ['date', 'name', 'address'] // 內容對應的參數名
    const data = this.formatJson(filterVal, this.tableData) // this.tableData是內容json
    export_json_to_excel(tHeader, data, '導出')
  })
}

到這一步就能夠在瀏覽器裏面測試了，我在谷歌、火狐裏面測的都沒有問題，可是在IE就有問題了，報錯了：

"Promise" 未定義，而後我又查找了些文章，知道要安裝babel-polyfill。

五、安裝babel-polyfill

npm install --save-dev babel-polyfill

在webpack.base.conf.js這個文件配置， 加入require("babel-polyfill")：

在main.js裏面導入它，

而後從新運行npm run dev，在IE下測試就能夠啦，可是低版本仍是不支持的，咱們對IE要求不是很高，這樣就能夠了。