springBoot+layui实现进度条功能

实现下载进度条

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

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: '
'
    	});

注意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);

效果图