最近有点闲，我们的架构师让我在文件下载时显示进度条，咳咳，自从组里来了前端妹纸后，好久没写前端代码了。。。
架构师推荐的用监听器（链接找不到了。。。），实现得有点复杂，我没太看懂。继续百度，看到了“在下载时计算进度，然后把进度放到session中，另外写一个请求取session中的进度”，听起来简单可行，开始ctrl+C。
后端代码1：把流输出到servlet中
outputStream = response.getOutputStream();
int len = 0;
//将进度放到session中，通过前端的定时请求获取进度
double nowLen = 0;
int percent;
byte[] buf = new byte[4 * 1024];
while ((len = inputStream.read(buf)) != -1) {
outputStream.write(buf, 0, len);
nowLen+=len;
percent = new Double(nowLen/hhs.getContentLength()*100).intValue();
// SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS");
// System.out.println("----------------------------长度为："+hhs.getContentLength()+" ，当前长度为： "+nowLen+" ,进度为： "+percent+" 当前时间为："+ sf.format(new Date()));
request.getSession().setAttribute("percent",percent);
}
ps：这个请求最开始要将session中的percent属性移除，不然很容易拿到上一次下载文件的进度100%
后端代码2：
//获取下载进度
@RequestMapping(value = "/flushProgress",method = RequestMethod.POST)
@ResponseBody
public JSONObject flushProgress(HttpServletRequest request){
int percent = 0;
HttpSession session = request.getSession();
JSONObject res = new JSONObject();
if(null!=session.getAttribute("percent")){
percent = (Integer)session.getAttribute("percent") ;
}
res.put("percent",percent);
return res;
}
ps: post请求记得加@ResponseBody哦，不然没有返回的
前端代码：
前情提示：前端整体是用的easyUI,下载通过a标签的src发送一个get请求将文件输出到servlet中，点击a标签时开始定时器获取进度percent。
function downloadSignFiles(){
$.messager.progress({
title:"提示",
msg:"文件下载中，请稍候......",
value:0,
interval:0
});
function getProgress () {
$.ajax({
url: '../../app/2rec/file/flushProgress.do',
async: true,
type: 'POST',
data: '',
success: function(response) {
var percent = response.percent;
$.messager.progress('bar').progressbar('setValue', percent);
// console.log("进度条的返回"+percent)
if(percent=="100"){
window.clearInterval(timeId);
setTimeout(function (){$.messager.progress('close')},1500);
}
},
error: function(error) {
$.messager.alert('失败提示', error.errorMessage);
}
});
}
var timeId = window.setInterval(getProgress,300);
}
ps:
1、单纯用progressbar没有遮罩的效果，所以用"messager"弹窗
2、interval:0会让进度条过渡更平滑，不然会出现闪进闪退的效果
3、进度达到100%后应该关闭定时器，关闭进度条的弹窗
4、为了让用户可以看到100%，设置了延时关闭进度条的弹窗
哦对，async设置成true才是异步哦~
