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

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