【黄啊码】vue配合PHP实现导出excel进度条显示

 先看效果：

 这里使用的是ElementUI的el-progress标签，废话不多话，贴代码

<el-link icon="el-icon-download" type="warning" @click="downListFn()">全部导出</el-link>
<el-progress :percentage="percentage" style="width:50%"></el-progress>
<span v-show="is_showbar">{{process_message}}</span>

后端我用cache记录要导出的数据的总条数，60s的有效期，因为我的服务器的响应时间最长也是60s

Cache::set('down'.$params['time'],0,60); //这里的time是拿请求的时间，这样后边都用这个时间来作为标志

//当前进度多少条了
    public function getCount(Request $request){
        $params = $request::only(['time']);
        if(Cache::get('down'.$params['time'])){
            return self::returnMsg(Error::SUCCESS,'获取成功',['count'=>Cache::get('down'.$params['time'])]);
        }else{
            return self::returnMsg(Error::SUCCESS,'获取成功',['count'=>0]);
        }

然后最主要的是这个，在phpExcel代码处理中，添加处理数据进度

剩下的就简单了，直接由前端处理进度即可

这里声明了几个需要的变量

current_count:0,//当前处理总数
sum_count:0,//进度条数据总数
down_time:'',//当前时间
percentage:0,//进度条百分比
is_prepare:0,//是否准备好下载了,
process_message:'正在处理数据',
is_showbar:false,

//下载订单数据
        downListFn:function(page,limit){
            this.down_time=common.dt;//这个是当前时间
            this.$http.get(请求头链接省略, {emulateJSON:true}).then((res)=>{ 
              if(res.body.code==-1){
                this.$message.error(res.body.message);
                }else{
                  this.is_showbar=true;
                  this.percentage=0;
                  this.process_message="正在处理数据";
                  this.sum_count=res.body.data.count;//总的数据量
                }
            })

                this.$http.get(请求头链接省略, {responseType: "blob"}).then((res)=>{ 
                  if(res.data){
                    this.is_prepare = 1;
                    this.percentage=100;//如果文件记录太少，立即响应就设置为100，避免缓存记录对不上
                    this.$fileDownload(res.data, "记录数据"+ this.$moment(new Date().getTime()).format("YYYY-MM-DD")+'.xlsx')
                  }
                })
                process_bar=setInterval(this.sync_process, 1000);
          },     
          //处理了多少条数据
          sync_process:function(){
            this.$http.get(这里对应我上边的getCount方法链接, {emulateJSON:true}).then((res)=>{ 
                if(res.body.code==-1){
                  this.$message.error(res.body.message);
                }else{
                  this.current_count=res.body.data.count
                  if(this.percentage!=100){
                    this.percentage=parseInt((res.body.data.count/this.sum_count)*100);
                  }
                   if(this.current_count>=this.sum_count){
                    this.process_message='正在准备下载'
                    if(this.is_prepare){
                      clearInterval(process_bar);// 关闭自动定时执行
                      this.process_message='请点击保存完成下载'
                    }
                  }
                }
            })
          },

 注：其实也可以用分页的形式，将内容放在redis，每放一次更新一下进度条，最后一次直接从redis取出来放进phpexcel，上边那种方式不一定适合所有场景