首页 前端知识 jQuery File Download Plugin 监听下载状态

jQuery File Download Plugin 监听下载状态

2024-05-28 09:05:30 前端知识 前端哥 230 266 我要收藏

情景: 下载文件时,可能有不确定是否点中按钮的情况;而且下载的文件如果用时较长的话,无法确定文件是下载中,还是已下载失败。所以需要有个加载状态,来帮用户确定当前操作,提升用户体验。

使用插件: 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,总之要保持一致,这是我遇到的问题,特此记录下来。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9762.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!