java实现导出，进度条显示

最新推荐文章于 2024-12-08 09:00:00 发布

weixin_43828846

最新推荐文章于 2024-12-08 09:00:00 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： java html jquery

本文链接：https://blog.csdn.net/weixin_43828846/article/details/107319296

该博客介绍了一种使用Java实现导出文件时显示进度条的方法。前端通过CSS和JS实现进度条布局及交互，后台利用session存储并更新导出进度。当进度条达到100%，表示导出完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：进度条满了，导出完成
在这里插入图片描述

前端

css:

#mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}
#myProgress {
	background-color: #AAAAAA;
	position:fixed;
	left:50%;
	margin-left:-100px;
	top:50%;
	margin-top: 15px;
	width: 200px;
	height: 30px;
	text-align: center;
	border-radius:5px;
	z-index: 1000;
}
#progressBarContainer {
	display: none;
}
#myBar {
	background-color: #CCDEF8;
	width: 0;
	height: 30px;
	position: absolute;
	border-radius:5px;
}

div布局：

<!-- 下载进度 -->
<div id="progressBarContainer">
	<%--<div id="mask"></div>--%>
	<div id="myProgress">
		<div id="myBar"></div>
	</div>
</div>

js方法

/**
* 展示进度条
*/
function showProgressBar() {
//显示进度条
$("#progressBarContainer").show();
$("#myProgress").show();
var elem = document.getElementById("myBar");
var width = 0;

//启动定时器
var progressFunction = setInterval(progress, 1000);

//定时器执行任务
function progress(){
	$.ajax({
		type:"post",
		url:"xxx?method=getProgress", //获取缓存中下载进度的url
		data:{

		},
		success:function(data){
			if(data == '100'){
				width = 100;
				elem.style.width = width + '%';
				clearInterval(progressFunction);

				setTimeout(function(){
					$("#progressBarContainer").hide();
					width = 0;
					elem.style.width = width + '%';
				}, 500);

			}else{
				console.log("已经处理的数据条数："+data);
				width = data;
				elem.style.width = width + '%';
			}
		},
		error:function(xmlHttpReq, textStatus, errorThrown){
			alert("导出失败，失败原因：" + textStatus+"，"+errorThrown);
		}
	});
}

后台处理方法

如何实时刷新进度呢？
将进度存进session中，导出时，设置进度（略）。

获取进度条

/**
 * 刷新进度条
 */
public void getProgress(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	int percent = 0;
	try {
		HttpSession session = request.getSession();
		Object mtPercent = session.getAttribute("percent");
		if (mtPercent != null) {
			percent = (Integer) mtPercent;
		}
		//移除session
		session.removeAttribute("percent");
	} catch (Exception e) {
		
	}
	response.getWriter().print(percent);

}