Java⽂件下载，HTML进度条实时刷新进度
效果展⽰
实现原理
1：后台同步进程开始下载⽂件
2：前台使⽤遮罩效果，使页⾯不能点击，使⽤circliful进度条插件(插件源码见后)
3：页⾯使⽤JavaScript定时器发送ajax请求刷新进度条数据
4：当进度满100的时候，遮罩消失，⽂件开始保存到本地
5：后台使⽤SpringMVC，其中使⽤session来保存当前下载的数据进度，因为下载⽂件的进度和刷新的进度是不同的⽅法，下载⽂件的⽅
法需要将数据存储到⼀个地⽅，供进度条⽅法来获取数据。
代码如下
HTML样式
#Mask {
position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #333;
z-index: 1002; left: 0px;
opacity:0.5; -moz-opacity:0.5;
}
#Progress{
position: absolute; top: 35%;left:35%;z-index: 2000;
}
#Progress .circle-info{
color:black;
}
<!---Mask是遮罩，Progress是进度条->
<div>
<div id="Mask"></div>
<div id="Progress" data-dimension="250" data-text="0%" data-info="导出进度" data-width="30" data-fontsize="38" data-percent="0" data-fgcolor="#61a9dc" da </div>
js刷新进度请求
因为插件问题，所以需要判断是不是第⼀次导出数据，如果是第⼀次，则执⾏circliful()⽅法，如果不是，则直接显⽰原来创建的
#Progress对象，否则会显⽰多个进度条在页⾯上。各种常见问题的处理都已做判断处理，⽐如第⼆次下载，进度⼀下显⽰为100%等。直
接拷贝进去就可以使⽤。
//显⽰进度条
var isFirstExport=true;
function showProgress(){
$("#Mask").css("height",$(document).height());
$("#Mask").css("width",$(document).width());
$("#Mask").show();
if(isFirstExport){
$("#Progress").circliful();
}else{
$("#Progress .circle-text").text("0%");
$("#Progress .circle-info").text("导出进度");
$("#Progress").show();
}
}
//隐藏进度条
function hideProgress(){
$("#Mask").hide();
$("#Progress").hide();
}
function onZipAll() {
/
/这⾥开始下载⽂件
var formData=$("#form_id").serialize();
location.href="${root}/record/v_seal_excel_all.do?"+formData;
//Ajax刷新进度条
showProgress();
window.setTimeout(function(){
var timer=window.setInterval(function(){
$.ajax({
type:'post',
dataType:'json',
url: "${root}/record/flushProgress.do",
success: function(data) {
$("#Progress .circle-text").text(data.percentText);
if(data.curCount===undefined||alCount===undefined){
$("#Progress .circle-info").text("导出进度");pip install 指定版本
}
else{
$("#Progress .circle-info").text("导出进度:"+data.curCount+"/"+alCount); }
if(data.percent=="100"){
window.clearInterval(timer);
hideProgress();
}
},
error:function(data){}
});
ssm三大框架},200);
},200);
isFirstExport=false;
}
SpringMVC进度条刷新⽅法
/**
* 进度条刷新，数据从session当中取
*/
@RequestMapping(value = "/flushProgress3.do")
@ResponseBody
public String flushProgress3(HttpServletRequest request) throws Exception
{
HashMap<String,Object> map=null;
try {
HttpSession session = Session();
map=new HashMap<String, Object>();
map.put("totalCount", Attribute("totalCount")); //总条数
map.put("curCount", Attribute("curCount")); //已导条数
map.put("percent", Attribute("percent")); //百分⽐数字
map.put("percentText", Attribute("percentText")); //百分⽐⽂本
} catch (Exception e) {
e.printStackTrace();
}
JSONString(map);
}
oracle中over的用法SpringMVC数据下载记录进度⽅法
@RequestMapping(value = "/download")
public void download( HttpServletRequest request) throws Exception {
//⾸先需要移除掉session当中的数据，因为如果是第⼆次下载数据的话，这些数据已经存在
//会导致进度条先是100%的状态，然后才从0%开始
//计算百分⽐，这⾥将下载数据的过程省略，需要有总数和当前数，总数应该是不变的，⽽当前数会不断变化，⽐如每循环⼀次加1等，因此会⼀直不断的写⼊到 ++curCount;
double dPercent=(double)curCount/totalCount; //将计算出来的数转换成double
int percent=(int)(dPercent*100); //再乘上100取整
}
附：插件源码
circliful插件源码，包含⼀个css和⼀个js，使⽤的时候直接引⼊到html当中即可
CSS
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half { width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.
circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
JS
(function( $ ) {
$.fn.circliful = function(options) {
var settings = $.extend({
// These are the defaults.
foregroundColor: "#556b2f",
backgroundColor: "#eee",
fillColor: false,
width: 15,
dimension: 200,
size: 15,
percent: 50,
animationStep: 1.0
}, options );
return this.each(function() {
var dimension = '';
var text = '';
var info = '';
var width = '';
var size = 0;
var percent = 0;
var endPercent = 100;
var fgcolor = '';
var bgcolor = '';
var icon = '';
var animationstep = 0.0;
$(this).addClass('circliful');
if($(this).data('dimension') != undefined) {
dimension = $(this).data('dimension');
} else {
dimension = settings.dimension;
}
if($(this).data('width') != undefined) {
width = $(this).data('width');
} else {
width = settings.width;
width = settings.width;
}
if($(this).data('fontsize') != undefined) {
size = $(this).data('fontsize');
} else {
size = settings.size;
}
if($(this).data('percent') != undefined) {
percent = $(this).data('percent') / 100;
springer期刊是不是挺差endPercent = $(this).data('percent');
} else {
percent = settings.percent / 100;
}
if($(this).data('fgcolor') != undefined) {
fgcolor = $(this).data('fgcolor');
} else {
fgcolor = settings.foregroundColor;
}
if($(this).data('bgcolor') != undefined) {
bgcolor = $(this).data('bgcolor');
} else {
bgcolor = settings.backgroundColor;
}
if($(this).data('animation-step') != undefined) {
animationstep = parseFloat($(this).data('animation-step'));
} else {
animationstep = settings.animationStep;
}
if($(this).data('text') != undefined) {
text = $(this).data('text');
if($(this).data('icon') != undefined) {
icon = '<i class="fa ' + $(this).data('icon') + '"></i>';
java下载过程}
if($(this).data('type') != undefined) {
type = $(this).data('type');
if(type == 'half') {
smtp服务器qq$(this).append('<span class="circle-text-half">' + icon + text + '</span>');
$(this).find('.circle-text-half').css({'line-height': (dimension / 1.45) + 'px', 'font-size' : size + 'px' }); } else {
$(this).append('<span class="circle-text">' + icon + text + '</span>');
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
}
} else {
$(this).append('<span class="circle-text">' + icon + text + '</span>');
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
}
} else if($(this).data('icon') != undefined) {
}
if($(this).data('info') != undefined) {
info = $(this).data('info');
if($(this).data('type') != undefined) {
type = $(this).data('type');
if(type == 'half') {
$(this).append('<span class="circle-info-half">' + info + '</span>');
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论