前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【黄啊码】vue配合PHP实现导出excel进度条显示

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

作者头像
黄啊码
发布2022-01-10 14:21:59
6210
发布2022-01-10 14:21:59
举报

先看效果:

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

代码语言:javascript
复制
<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

代码语言:javascript
复制
Cache::set('down'.$params['time'],0,60);
//这里的time是拿请求的时间,这样后边都用这个时间来作为标志
代码语言:javascript
复制
//当前进度多少条了
    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代码处理中,添加处理数据进度

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

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

代码语言:javascript
复制
current_count:0,//当前处理总数
sum_count:0,//进度条数据总数
down_time:'',//当前时间
percentage:0,//进度条百分比
is_prepare:0,//是否准备好下载了,
process_message:'正在处理数据',
is_showbar:false,
代码语言:javascript
复制
 //下载订单数据
        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='请点击保存完成下载'
                    }
                  }
                }
            })
          },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-11-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档