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,附件下载

jquery.fileDownload.js

jquery-ui.js

layui

4,跨域问题

近期使用 springCloud 微服务时,遇到跨域问题,谷歌浏览器 cookie 的 SameSite,下载文件正常,但无法回调 successCallback 函数,暂时没有好的解决方案

参看:

https://blog.csdn/cnq2328/article/details/105134286/?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

5,参考链接

https://www.codercto/a/5141.html
https://blog.csdn/qq_33212500/article/details/78850891
https://blog.csdn/qq_26531719/article/details/77683547
https://blog.csdn/qq_28929589/article/details/82286197

更多推荐

jquery.fileDownload.js