有時候業務需要做表格的匯出功能的需求，以下是簡單的方式：

我這裡是封裝了一下報表請求資料的api，注意：一定要寫responseType:'blob',不然請求的資料會亂碼，然後，點選報表時綁定了點選事件，

此時，我對事件做了個數據的大小判斷，資料過於多提示放少些資料

1 exportReports() { // this.DefaultData.exportExcelMax限制一下匯出的總條數 if (this.totals <= this.DefaultData.exportExcelMax) { this.$confirm('確定要匯出當前' + this.totals + '條資料？', '提示', { dangerouslyUseHTMLString: true, confirmButtonText: '確定', cancelButtonText: '取消' }).then(() => { this.getExpportData() }).catch(() => { }) } else { this.$confirm('當前要匯出的' + this.totals + '條資料，資料量過大，不能一次匯出！
 

2 建議分時間段匯出所需資料。', '提示', { dangerouslyUseHTMLString: true, showCancelButton: false }).then(() => { }).catch(() => { }) } },

然後再呼叫了請求資料的介面,下面的時間上我是因為業務做了處理的，重要的程式碼就是

this.$http.exportExce請求裡面的東西，可以直接複製使用

 getExpportData(){
    const loading = this.$loading({
      lock: true,
      text: 
 
'正在匯出，請稍等......',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    const data = {
      "pageNum":this.currentPage,
      "pageSize":999999,
      "createdTimeFrom":this.startTime ? this.startTime + " " + "00:00:00" : getCurDate()+" " + "00:00:00" ,
      "createdTimeTo": this.endTime ? this
 
.endTime + " " + "23:59:59" : getCurDate()+" "+ "23:59:59"
    }
    this.$http.exportExcel('url',data).then(res=>{
      console.log(res);
      const content = res.data
      const blob = new Blob([content])
      console.log(blob);
      const fileName = getCurDate() + '-採購需求跟進報表'+'.xlsx'; /*  `${new Date().getTime()}_匯出結果.xlsx` */
      if ('download' in document.createElement('a')) {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      } else {
        navigator.msSaveBlob(blob, fileName)
      }
       loading.close()
    }).catch((r) => {
      console.error(r)
      message.error('匯出失敗')
       loading.close()
    })
  },

注意：如果請求資料的傳入分頁的pageSize你可以傳入無限大，這樣就可以避免每次匯出只能匯出當前頁的資料量