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

太过爱你忘了你带给我的痛 2023-06-12 04:13 1阅读 0赞

近期的项目里有一个需求,列表查询模块有个导出按钮,功能很简单,用的是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("导出失败");
                                }
                            });
                        });
                    }

————————————————  
版权声明：本文为CSDN博主「Aaron木头」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/weixin\_41029960/article/details/82585082