表格数据导出报表

有时候业务需要做表格的导出功能的需求，以下是简单的方式：

我这里是封装了一下报表请求数据的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(() => { }) } },

View Code

然后再调用了请求数据的接口,下面的时间上我是因为业务做了处理的，重要的代码就是

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你可以传入无限大，这样就可以避免每次导出只能导出当前页的数据量

心想事成