【jquery】使用 jQuery.fileDownload.js 插件实现Ajax下载文件

mac2024-04-03 54

近期的项目里有一个需求,列表查询模块有个导出按钮,功能很简单,用的是form表单把查询参数提交到后台,提交之后前台给导出按钮添加disable,防止用户重复导出,避免导出的数据量很大的时候给服务器带来不必要的负担.后台根据前台传的查询参数执行条件查询,将查询到的结果集生成Excel用response写到前台直接下载.

做完之后测试大佬提了个BUG,由于Ajax请求无法直接下载文件,所以用的是form表单提交,所以请求完成之后前台拿不到回调,所以在导出完成后没办法将导出按钮的禁用恢复.开始做的是用户刷新列表的时候恢复移除导出按钮的disable,但是测试大佬说用户体验不好.没办法,只能疯狂百度…

一开始试了form.js插件,此插件可以实现form表单提交之后拿到回调函数,并且请求前,请求失败,请求完成都可以执行对应的方法.但是此方法无法将response的文件流返回前台并当作文件下载去解析……

后来,在组长友情帮助下…发现了filedownload.js这个神级插件.此插件可以实现Ajax下载文件,直接上代码

后端代码

@RequestMapping(value = "exportAll", method = RequestMethod.POST, produces = "text/html;charset=UTF-8") @ResponseBody public String exportAll(HttpServletRequest request, HttpServletResponse response, StandardDataItem standardDataItem) { try { //需设置头信息 response.setHeader("Set-Cookie", "fileDownload=true; path=/"); //生成Excel文件方法 String path = standardDataItemService.exportStandardDataItemAll(standardDataItem); //文件流写到response fileOperatorService.fileDownLoad(request, response, path); return JSONUtil.result(true, "导出标准数据项成功"); } catch (Exception e) { e.printStackTrace(); } return JSONUtil.result(false, "导出标准数据项出错"); }

前端js 需要先引用 jQuery.fileDownload.js

exportAll : function() { var inputInfo = $("#inputSearch").val(); GLOBAL.pagerOptions.map.searchKeyword = inputInfo; $("#exportBtn").on("click", function() { $("#exportBtn").attr("disabled", true); $("#exportBtn").val("正在导出"); if ($('#inputSearchForm').val() == 'BZSJXFL_GAB') { $('#dataitemCategory').val($('#inputSearchForm').val()); } else { $('#dataitemCategory').val(GLOBAL.pagerOptions.dataitemType); } $('#inputSearchForm').val($('#inputSearch').val()); $('#classifierWord').val(GLOBAL.pagerOptions.map.classifierWord); var url = CONTEXTPATH + "/standardMgr/standardDataItem/exportAll"; //实现Ajax下载文件 $.fileDownload(url, { httpMethod : 'POST', data : $("#file-download-form").serialize(), prepareCallback : function(url) { $("#exportBtn").attr("disabled", true); $("#exportBtn").html("正在导出"); }, successCallback : function(url) { $("#exportBtn").attr("disabled", false); $("#exportBtn").html("导出"); }, failCallback : function(html, url) { alert("导出失败"); } }); }); }

最新回复(0)