springBoot+layui实现进度条功能springBoot+layui实现进度条功能
实现下载进度条
项⽬中有⼀个多个图⽚打包成压缩包后下载的功能，之前只是
var msgId = layer.msg('正在导出，请稍候···',{
icon:16,
shade:0.4,
time:false//取消⾃动关闭
});
这样⾃定义⼀个弹出层的提⽰框，这样不⽅便知道具体的进度，空闲时间，把这个做成进度条试试
思路：
1.后端：在处理图⽚⽣成到压缩包时候，不断把进度计算出百分⽐，更新到session中
2.ajax调⽤⽅法获取session中的当前进度
3.layui展⽰
后端实现
//获取session
HttpSession session = Session();
session.setAttribute("exportStatus","start");
//定义double类型，⽤于保存当前百分⽐
double currentPercent;
//int类型，进度条显⽰的百分⽐
int percent =0;
//循环⽣成图⽚保存到压缩流
for(int i =0; i < reportNums.length; i++){
//处理图⽚代码省略
//计算百分⽐
currentPercent =((i +1d)/ reportNums.length)*100;
//因为百分⽐定义的为整数型，所以每次当前百分⽐和进度条显⽰的百分⽐之间差值⼤于1才更新
if((int) Math.floor(currentPercent)- percent >=1){
percent =(int)Math.floor(currentPercent);
//"write，数值形式"⽅便显⽰
session.setAttribute("exportStatus","write,"+ percent);
}
}
还要有ajax调⽤的⽅法查看当前进度，显⽰当前session⾥的指定属性的内容即可
/**
* 查询当前导出的进度（⽤于进度条显⽰）
* @return
*/
@RequestMapping("/exportStatus")
@ResponseBody
public String exportStatus(){
return(Session().getAttribute("exportStatus");
}
js
点击导出压缩包按钮的执⾏⽅法中，先弹出进度条
//弹出进度条
var progressLayer = layer.open({
type:0,
title:false,
closeBtn:0,
btn:false,
content:'<div class="layui-progress layui-progress-big" lay-filter="progress"><div class="layui-progress-bar"></div></div>' });
注意layui进度条的使⽤：前提是你要加载element模块
layui.use('element',function(){
var element = layui.element;
});
设置了过滤器（lay-filter=“progress”）的进度条
执⾏⽅法：element.progress(‘progress’, ‘50%’)；改变进度条layui下载
//定义扫描时间
var scanTime =1000;
//进度条⽅法查看进度
var timer =setInterval(function(){
$.ajax({
url: exportStatusUrl,
success:function(data){
var arr = data.split(",");
if(arr.length ==2){
//动态设置百分⽐
var percent = arr[1];
element.progress('progress', percent +'%')
if(percent  ==100){
//进度到100%，注意关闭定时器
clearInterval(timer);
//关闭弹出层
layer.close(progressLayer);
}
}
},
error:function(e){
}
});
}, scanTime);
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。