递归实现大批量数据文件下载功能

elementui + vue 实现 大批量数据的excel文件下载。这里主要实现方式 通过点击按钮 导出表格功能。实现原理：类似于分页请求，为了在规定超时范围内将大批量数据导出。并且是同步实现，第一页的数据下载完成之后去下载第二页的数据。缺点：用户体验不佳，多文件导出。优点：在不超时的情况下 确保每条数据都能正常导出。

主要实现代码：

1.定义点击事件

 handleClick(action,data){
      if(action == 'import'){
        // this.getDownload();
        this.$loading({
          lock: true,
          text: '正在下载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.getAllData();
      }
    },

2.计算分页（this.total 为数据总条数，我这里定义了每次请求30万条数据。）

   // 获取所有数据
    getAllData(){
      let downNumber = 300000;
      let totalNumber = Math.ceil(this.total / downNumber)
      for(let i=0;i<totalNumber;i++){
        this.result.push(parseInt(i * downNumber + 1));
      }
      this.upload(this.result)
    },

3.递归实现 数据请求

upload(alllocalId){
    let res = []
    let that = this;
     return new Promise((resolve,reject)=>{
         let recursion = (alllocalId)=>{
             that.$loading({
                lock: true,
                text: '正在下载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
            if(alllocalId.length){
                let cur = alllocalId.pop()
                res.unshift(cur);//do it
                  that.$axios({
                  url:'XXXX?applyId='+this.id+'&start='+ cur,
                  methods:'get',
                  responseType: 'blob',
                }).then(res=>{
                  download(res.data,'卡号卡密.xlsx')
                  recursion(alllocalId)
                }) 
               
            }else{
                this.$loading().close();
                resolve(res);
            } 
         }
         recursion(alllocalId)  
     })           

4. download(res.data,'卡号卡密.xlsx') 为接收后台文件流转成excel 方法

export function download (data,titName) {
    if(!data){
      return
    }
    const content = data
    const blob = new Blob([content],{type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
    const fileName = titName?titName: '自定义文件名.xls'
    if ('download' in document.createElement('a')) { // 非IE下载
      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) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    navigator.msSaveBlob(blob)
    }
  }