【黄啊码】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.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='请点击保存完成下载'}}}})},

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

php 导出excel 进度条显示
下载大量数据到Excel表格时,无法查看下载的实时进度. 效果展示: 1.统计数据数量: 2.显示数量: 3.下载进度条展示: 代码: 1.前端显示代码 [html] view plaincopy & ...
java进度条_Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验从服务器上压缩下载: 从 ...
Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 从服务器上压缩下载: 从excel文件导入数据: 从数据库导出e ...
java excel进度条_导出excel 用easyui显示进度条(也适用于其他框架遮罩层，进度条)...
每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃. 所以 ...
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
vue框架使用xlsx导出excel表格
刚接手一个项目,需要做表格导出,之前没用过,特做此记录,以备下次使用.此模板适用于修改表格样式时使用,若只想简单的直接导出,可以参考另一篇:在vue中,使用xlsx配合FileSaver进行导出exc ...
在vue中把数据导出Excel文件
在vue中把数据导出Excel文件第一次尝试写文章在vue中把数据导出成Excel格式的文件,话不多,上代码: 第一步我们要先安装几个集成的插件 npm install -S file-saver ...
element+后台管理系统数据导出为excel+进度条导出
element+后台管理系统数据导出+进度条导出文章目录 element+后台管理系统数据导出+进度条导出一.项目需求? 二.使用方法 1.将进度条封装成组件,需要的值通过父组件传递 2.父组件引 ...
vue + element中el-table导出excel
第一步: 安装依赖: npm install --save xlsx file-saver 这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/ ...

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

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

最新文章

热门文章