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