【jquery】使用 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("導出失敗");
                            }
                        });
                    });
                }

————————————————
版權聲明：本文爲CSDN博主「Aaron木頭」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_41029960/article/details/82585082