jQuery File Download Plugin 监听下载状态

qq_35477390

已于 2022-07-29 22:02:52 修改

阅读量823

点赞数 2

分类专栏：前端文章标签： javascript 前端 jquery

于 2022-07-28 23:05:36 首次发布

本文链接：https://blog.csdn.net/qq_35477390/article/details/126045725

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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