情景: 下载文件时,可能有不确定是否点中按钮的情况;而且下载的文件如果用时较长的话,无法确定文件是下载中,还是已下载失败。所以需要有个加载状态,来帮用户确定当前操作,提升用户体验。
使用插件: jQuery File Download Plugin v1.4.5
插件地址: https://github.com/johnculviner/jquery.fileDownload/blob/master/src/Scripts/jquery.fileDownload.js
使用方式:
<!--引入js-->
<script src="static/jquery/jquery.fileDownload.js"></script>
# 下载文件共通
function downloadFileHandle(url,data){
$.fileDownload(url,{
httpMethod: 'GET',
data:data,
prepareCallback:function (url) {
// 相关业务代码--这里引入了layer
layer.load();
},
successCallback:function (url){
// 相关业务代码--这里引入了layer
layer.closeAll('loading');
},
failCallback: function (html,url) {
// 相关业务代码--这里引入了layer
layer.closeAll('loading');
layer.msg("文件下载失败!!", {icon: 5});
}
});
}
注意要点:
需要在后台设置Cookie,不然successCallback失效,它需要依赖后台传过来的Cookie作为判断条件是否执行。
/*有两种设置方式*/
// 方法一
response.setHeader("Set-Cookie", "fileDownload=true; path=/");
// 方法二
Cookie cookie = new Cookie("fileDownload","true");
cookie.setPath("/");
response.addCookie(cookie);
相关问题:
前端接收不到cookie设置的值,极可能是跨域引起问题,如果不是前后端分离的系统,请检查前端访问地址的域名和请求后台的接口的域名是否相同,注意localhost 和 Ip 的不同:浏览器使用localhost访问页面,访问接口也需要使用localhost,不能是IP,总之要保持一致,这是我遇到的问题,特此记录下来。