ElementUI表格數據導出為Excel

記錄ElementUI表格數據導出為Excel的步驟：

1.　　安裝依賴

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

可能會報錯，提示：

　　found 72 vulnerabilities (68 low, 1 moderate, 3 high)
　　run `npm audit fix` to fix them, or `npm audit` for details

按照提示嘗試修復就好了。

2.　　下載Blob.js、export2Excel.js

度盤地址：https://pan.baidu.com/s/1Axo_kC0WatR3hnFK-JSfOA 　　提取碼：a6u9

在src下創建excel文件夾，將下載的文件拷貝進去。

3.　　功能代碼

添加導出按鈕

 

<el-button type="primary" size="small" @click="downloadExcel">導出</el-button>

 

在methods中寫對應函數

 

downloadExcel() {
      this.$confirm('將導出為excel文件，確認導出?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.excelData = this.tableData
        this.export2Excel()
      }).catch(() => {

      })
    },
    // 數據寫入excel
    export2Excel() {
      var that = this
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/export2Excel') // 這里必須使用絕對路徑，使用@/+存放export2Excel的路徑
        const tHeader = ['單體名稱', '檢測日期', '所屬項目', '檢測人員', '檢測機構', '地區'] // 導出的excel的表頭字段
        const filterVal = ['name', 'planCheckDate', 'projectName', 'checkWorker', 'companyName', 'regionName'] // 對象屬性，對應於tHeader
        const list = that.excelData //json數組對象，接口返回的數據
        const data = that.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '檢測單體數據')// 導出的表格名稱
      })
    },
    // 格式轉換，直接復制即可
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

測試可用

 

 

 

 

其他問題暫不清楚，參考來源：https://blog.csdn.net/qq_26242601/article/details/91874261