实现下载进度条

项目中有一个多个图片打包成压缩包后下载的功能，之前只是

var msgId = layer.msg('正在导出，请稍候···', {icon: 16,shade: 0.4,time:false //取消自动关闭});	

这样自定义一个弹出层的提示框，这样不方便知道具体的进度，空闲时间，把这个做成进度条试试

思路：
1.后端：在处理图片生成到压缩包时候，不断把进度计算出百分比，更新到session中
2.ajax调用方法获取session中的当前进度
3.layui展示

后端实现

//获取session
HttpSession session = HttpRequest.getSession();
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 (String) super.getSession().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%’);改变进度条

//定义扫描时间
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);

效果图