记一次下载状态获取

最新推荐文章于 2022-11-18 11:45:15 发布

"贰拾叁"

最新推荐文章于 2022-11-18 11:45:15 发布

阅读量263

点赞数 1

文章标签： java ajax jsp

本文链接：https://blog.csdn.net/Ka__ze/article/details/118763950

版权

需求：前端发出下载请求，当后端推送文件完毕后需要给前端一个下载完毕的信号
技术选型：springmvc js jsp
思路

下载完毕后返回一个视图（ModelAndView），利用视图传递参数

//此为初步构想代码
protected ModelAndView download(HttpServletRequest req,HttpServletResponse resp,
                               String attribute){
    ServletOutputStream outStream;
    HSSFWorkbook workbook;
    ModelAndView mav ;
    //RESULT_PAGE 专门展示后端返回值的jsp（/pages/result.jsp）
    //AmluConstants 常量类，存放各种参数
    //AmluConstants.REQUEST_RESULT_INFO 需要向request中写返回值时，key的名称
    //ResultInfoManager 返回信息组装类，根据异常类型返回相应提示语
    try{
        //工作簿对象生成
        workbook = getWorkbook(attribute);
        //抛出文件生成异常
        if(workbook==null){
			request.setAttribute(AmluConstants.REQUEST_RESULT_INFO,
                         ResultInfoManager.getWorkbookErrorInfo(e));
            mav = new ModelAndView(RESULT_PAGE);
            return mav;
        }
        //文件推送
        resp.reset();
        resp.setContentType("application/msexcel;charset=utf-8");
        resp.setHeader("Content-Disposition","attachment;filename="+
                      URLEncoder.encode(fileName,"UTF-8")+".xls");
        outStream = response.getOutputStream();
        workbook.write(outStream);
        outStream.flush();
        //完成状态推送
        mav = new ModelAndView();
        mav.addObject("message","success");
        return mav;
    }catch(Exception e){
        logger.error(e);
		req.setAttribute(AmluConstants.REQUEST_RESULT_INFO,
                             ResultInfoManager.getDownloadErrorInfo(e));
        mav = new ModelAndView(RESULT_PAGE);
        return mav；
    }finally{
        if(outStream!=null){
            outStream.close();
        }
    }
}

理想情况下，若有异常抛出则跳转至RESULT_PAGE页面并显示错误信息，若正常状态则可以传递给前端信息[message:success] , 但通过Debug可发现上述写法会导致返回的视图为null，原因如下：

controller方法参数中带HttpServletResponse response时，方法处理完之后视图为空

参考文档：springmvc 拦截器中ModelAndView为null

对response设置响应头，使页面刷新
```
response.setHeader("refresh","1");//每秒刷新一次
```
此种方法写法不对，因为本意是只让页面刷新一次就可以，无需重复刷新，但除开写法的原因这样写也不会生效，因为下载文件需要对响应头进行修改（Content-Disposition），当下载完毕再次修改响应头时会修改失效（可能响应发出后，即推送文件流后，就无法再修改响应头了）

关于设置response响应头的更多写法：

参考文档：response里的setHeader用法

下载方法返回类型为void，向request中写值，跳转到特定页面读值显示信息

跳转至别的页面有两种方式，重定向和请求转发

重定向会告诉客户端目标网址是什么，并返回响应，客户端接收到响应后会再次发送请求去刚刚得到的目标网址，所以这中间存在两次request请求，如果向request中写值的话，重定向后request内的值会丢失。

protected void download(HttpServletRequest req,HttpServletResponse resp,
                               String attribute){
    ServletOutputStream outStream;
    HSSFWorkbook workbook;
    try{
        //工作簿对象生成
        workbook = getWorkbook(attribute);
        //抛出文件生成异常
        if(workbook==null){
			throw new NullArgumentException("未获取到对应模板文件");
        }
        //文件推送
        resp.reset();
        resp.setContentType("application/msexcel;charset=utf-8");
        resp.setHeader("Content-Disposition","attachment;filename="+
                      URLEncoder.encode(fileName,"UTF-8")+".xls");
        outStream = response.getOutputStream();
        workbook.write(outStream);
        outStream.flush();
        //完成状态推送
        req.setAttribute(AmluConstants.REQUEST_RESULT_INFO,
                             "下载成功");
        req.getRequestDispatcher(RESULT_PAGE).forward(req,resp);
    }catch(Exception e){
        logger.error(e);
		req.setAttribute(AmluConstants.REQUEST_RESULT_INFO,
                             ResultInfoManager.getDownloadErrorInfo(e));
        //采用请求转发进行错误页面跳转
        req.getRequestDispatcher(RESULT_PAGE).forward(req,resp);
    }finally{
        if(outStream!=null){
            outStream.close();
        }
    }
}

此种方法有效，但美中不足的是在下载完成后跳转了页面，很不人性化。能否在下载请求正常完成后向前端传递信号呢？

基于上述方法（方法3）的下载完成后的前端传值尝试

4.1 尝试读取cookie

后端代码只需修改 //完成状态推送后的代码

//更新完后，设定cookie，用于页面判断更新完成后的标志
Cookie status = new Cookie("downloadStatus","success");
status.setMaxAge(600);
//添加cookie操作必须在写出文件前，如果写在后面，随着数据量增大时cookie无法写入
response.addCookie(status);

var timer1 = setInterval(refreshPage,1500);
function refeshPage(){
 if(getCookie("downloadStatus")=="success"){
    clearInterval(timer1);//每隔一秒的判断操作停止
    delCookie("updateStatus");//删除cookie
    windows.location.reload();//页面刷新
 }
}
function getCookie(){
<%
 String targetName="downloadStatus";
 request.getCookies();
 Cookie[] cookies=request.getCookies();
 if(cookies!=null){
 	for(int i=0;i<cookies.length;i++){
 		Cookie cookie = cookies[i];
 		if(cookie.getName().equals(targetName))){
          	%>
 			return "success";
 			<%
          }
      }
  }
%>
}
//此处省略delCookie()具体写法

对于上述jsp代码在实际运行中发现了一些问题：

（1）当重复查询cookie时，每次查询的结果与第一次的结果相同，即使在后台新增了cookie后也是如此，而当刷新jsp页面后就能获取到最新的cookie。这让笔者得出一些结论：脚本片段中的代码是不会重复执行多次的。这或许与jsp的执行原理有关。

（2）当刷新页面后获取到最新的cookie后随即执行delCookie()删除目标cookie，这一流程是可以是实现的。也正是上述（1）中的结论：脚本片段中的代码可以执行一次。

类似案例：为什么这个JSP程序只能执行一次

4.2 尝试EL表达式（${ xxx }）取值

后端代码只需修改 //完成状态推送后的代码

request.setAttribute("downloadStatus","success");

var timer1 = setInterval(refreshPage,1500);
function refreshPage(){
	var downloadStatus=$("#downloadStatus").val();
	if(downloadStatus=="success"){
		<%request.removeAttribute("downloadStatus")%>
		windows.location.reload();//页面刷新
	}
}

<body>
	<input type="hidden" id="downloadStatus" value="${ downloadStatus }"/>
</body>

此种方法依然无效，无法实时获取request中的实时参数，原因未知。【挖坑】

4.3 尝试循环调用异步请求查询实时参数

//这次将参数写在了session中
HttpSession session = req.getSession();
session.setAttribute("downloadStatus_37","success");
//参数key详细化，以便后续此种方法大量复用

//控制层增加方法
@RequestMapping(params="method=queryStatus")
@ResponseBody
public Object queryStatus(String name,HttpServletRequest req){
    return req.getSession().getAttribute(name);
}

var timer1;
function queryStatus(){
	var url = "${pageContext.request.contextPath}/budgtBusDiff.htm?method=queryStatus";
	$.ajax({
		type:"get",
		url:url,
		data: "name=downloadStatus_37",
		dataType:"json",
		cache:false,
		success:function(msg){
			if(msg=='success'){
				//销毁对应的参数
				<%request.getSession().removeAttribute("downloadStatus_37")%>
				window.location.reload();//页面刷新，恢复初始下载状态
			}
		},
		error:function(msg){
				console.log("ajax call failed:queryStatus()");
				console.log(msg);
		},
		complete:function(msg){}
	})
}
function download_onclick(){
	DOWNLAODFORM.submit();
	$('#background').show();//生成背景遮罩
	timer1=setInterval(queryStatus,3000);//提交下载请求后再开始查询状态
}

此种方法可行。

可参考的文档：前端显示后端处理进度的简单实现

其他想法：

对于“下载进度感知”这一需求，是否可以有更多的处理方式？

我们知道浏览器文件下载的进度条大多是根据响应头的content-length字段进行下载进度展示的，网上对应也有很多插件组件可供选择，但对于实时查表然后再生成文件并推送的下载需求，此种进度展示方法并不合适，因为从用户角度来说，等待查询结果和等待文件推送完毕都是“等待”的一部分，并无可区分的差异。

如果要感知sql语句的查询进度，该怎么做呢？笔者有俩种思路：

（1）先count一下数据量，由特定算法函数给出具体的查询时间，将剩余查询时间传递给前端，但此种方法需要知道总的数据量，如果需要多次查询，数据总量不好给出；

（2）预先在程序中埋点，当执行完某一部分的代码后就更新“下载进度参数”，此种方法较为繁琐，但如果能借助框架的支持就会简单很多。

对于消息的推送，也可以采用WebSocket向前端主动推送消息。

其他可参考文章：

websocket进阶下载进度监控_哔哩哔哩_

下载文件时显示动态的进度条(前端easyUI,后台java)

"贰拾叁"

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记一次下载状态获取

需求：前端发出下载请求，当后端推送文件完毕后需要给前端一个下载完毕的信号技术选型：springmvc js jsp思路下载完毕后返回一个视图（ModelAndView），利用视图传递参数//此为初步构想代码protected ModelAndView download(HttpServletRequest req,HttpServletResponse resp, String attribute){ Servl..
复制链接

扫一扫