java实现下载时进度条提示

1、实现原理

计算出已经处理的数据记录数与所有需要导出的数据记录数的比例，根据每一个登陆用户的不同将比例存入缓存中，前台设计一个定时器，每隔一段时间去缓存中获取比例，然后根据比例来展示一下下载的进度。

2、具体代码实现

//下载比例的存储

long totalCount = 总记录数；

long a = i * 100 / totalCount;

cacheService.setCache(当前登陆用户ID+"特定的标志", a+"");



--------------------------------------------------------------------------------


//下载比例的获取

String cache = cacheService.getCache(当前登陆用户ID+"特定的标志");

if (cache == null) {
	cache = "0";
}
		
result.put("info", cache);

if("f".equals(cache)) {
	cacheService.setCache(session("F_UID")+"PROGRESS","0");
}

$("#export").click(function(){
    //通过ajax去下载
	$.ajax({
		
	});
	
    //显示进度条
	$("#myProgress").show();
	$("#myBarMsg").show();
	$("#myBarMsg").html("当前进度：0%");
	var elem = document.getElementById("myBar"); 
		var width = 0;
	
        //启动定时器
	var progressFunction = setInterval(progress, 1000);
        
        //定时器执行任务
        function progress(){
        	
        	$.ajax({
			type:"post",
			url:"", //获取缓存中下载进度的url
			data:{
				
			},
			success:function(data){
		 	 	
		 	 	if(data.info == 'f'){
		 	 		width = 100;
		 	 		elem.style.width = width + '%'; 
		 	 		$("#myBarMsg").html("当前进度：100%，导出成功！");
		 	 		clearInterval(progressFunction);
		 	 		
		 	 		setTimeout(function(){ 
		 	 				$("#myProgress").hide();
		 	 				$("#myBarMsg").hide(); 
		 	 				width = 0;
		 	 				elem.style.width = width + '%'; 
		 	 		}, 5000);
		 	 		
		 	 	}else{
		 	 		console.log("已经处理的数据条数："+data.info);
		 	 		width = data.info; 
  						elem.style.width = width + '%'; 
  						$("#myBarMsg").html("当前进度："+data.info+"%"+"&nbsp;&nbsp;&nbsp;&nbsp;(<label style='color:red;'>导出过程中请不要切换目录，可打开新的窗口查看其他！</label>)");
		 	 	}
			},
			error:function(xmlHttpReq, textStatus, errorThrown){
				alert("导出失败，失败原因：" + textStatus+"，"+errorThrown);
			}
		});
			
        }

});

<!-- css -->
#myProgress {
  width: 100%;
  height: 30px;
  position: relative;
  background-color: #ddd;
  border-radius:5px;
}

#myBar {
  background-color: #4CAF50;
  width: 0px;
  height: 30px;
  position: absolute;
  border-radius:5px;
}



<!-- 下载进度 -->
<div id="myProgress" style="display:none;">
  	<div id="myBar"></div>
</div>
<div id="myBarMsg" z-index:100></div>

java实现下载时进度条提示

1、实现原理

2、具体代码实现

猜你喜欢