Vue項目表格資料導出成excel檔案

将頁面中表格資料導出excel格式的檔案（vue）

引言：

項目需要将頁面中的表格資料導出excel格式的檔案，折騰了許久，在網上各種百度，但是各種踩坑，最後看了幾個資料對比解決了。

安裝相關依賴

• npm install file-saver --save

  用來生成檔案的web應用程式

• npm install xlsx --save

  電子表格格式的解析器

• npm install script-loader --save-dev

  将js挂在在全局下

在src目錄下建立vendor檔案夾：（vendor—名字任取）

• 裡面放置兩個核心js檔案

  Blob.js

  和

  Export2Excel.js

  （百度可下載下傳）

更改webpack.base.conf.js配置。

• 在resolve的alias裡添加一行如下代碼：

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

• alias是配置别名

在需要導出excel格式檔案的頁面中寫入以下兩個方法，如：

export2Excel() {
  const _this = this
  require.ensure([], () => {
    const {
      export_json_to_excel
    } = require('@/vendor/Export2Excel');
    const tHeader = _this.tHeader;
    const filterVal = _this.filterVal;
    const list = _this.optionData;
    const data = _this.formatJson(filterVal, list);
    export_json_to_excel(tHeader, data, '眼健康名額');
  })
},
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}
           

• tHeader

  表示表頭的标題，類似格式>>>

  ['年級', '統計人數', '左眼平均視力']

  ；

• filterVal

  表示表頭的字段名，類似格式>>>

  ['gradeName', 'statistics', 'avgLeftVision']

  ；

• list

  表示表格的資料，類似格式>>>

  [{'gradeName':'一年級','statistics':'100','avgLeftVision'}:5.0]

  ；

• export_json_to_excel(tHeader, data, '眼健康名額')

  裡面最後一個參數表示導出的表格名稱；

• formatJson

  方法為格式轉換。

當我們要導出表格執行

@click

事件調用

export2Excel

函數就行

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

優化一下點選事件，新加一個方法，點選此方法調用

downloadExcel() {
        this.$confirm('确定下載下傳清單檔案?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.export2Excel()
        }).catch(() => {

        });
      }
           

• 這樣點選導出後會詢問是否确定，确定了才會執行

  export2Excel

  函數