1,简短说明
使用 jquery.fileDownload.js 增加前后端交互友好性
2,实例
前端代码
$.fileDownload(url,{
httpMethod: 'GET',
data:data,
// preparingMessageHtml:'文件正在下载,请稍等...', // 需要jquery-ui.js
// failMessageHtml:'文件下载失败!!', // 需要jquery-ui.js
prepareCallback:function(url){
layer.msg("文件下载中...");
// 数据加载动画
$("body").append('<div id="pload" style="position:fixed;top:45%;z-index:1200;background:url(images/loading2.gif) top center no-repeat;width:1900px;height:768px;margin:auto auto;"></div>');
},
abortCallback:function(url){
// 异常终止
layer.msg("文件下载异常!!");
$("#pload").remove();
},
successCallback:function(url){
layer.msg("文件下载成功!!");
$("#pload").remove();
},
failCallback: function (html, url) {
layer.msg("文件下载失败!!");
$("#pload").remove();
}
});
后端代码
response.setHeader("Set-Cookie", "fileDownload=true; path=/");
3,附件下载
4,跨域问题
近期使用 springCloud 微服务时,遇到跨域问题,谷歌浏览器 cookie 的 SameSite,下载文件正常,但无法回调 successCallback 函数,暂时没有好的解决方案
参看:
https://blog.csdn.net/cnq2328/article/details/105134286/?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
5,参考链接
https://www.codercto.com/a/5141.html
https://blog.csdn.net/qq_33212500/article/details/78850891
https://blog.csdn.net/qq_26531719/article/details/77683547
https://blog.csdn.net/qq_28929589/article/details/82286197