先看效果：
这里使用的是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.countif(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='请点击保存完成下载'}}}})},
