XMLHttpRequest實現(xiàn)異步下載

背景

項目需要實現(xiàn)在下載Excel時,實時顯示文件下載的進度條鸿秆,不能直接調(diào)用瀏覽器下載牡拇。因此超鏈接下載,或者調(diào)用window.location.ref等方法無法滿足要求孵运,因此只有采用異步的方式秦陋。

為什么要用XMLHttpRequest

jQuery的AJAX是可以實現(xiàn)文件的異步上傳,但無法實現(xiàn)異步下載治笨,因此我們需要用到JS的XMLHttpRequest對象來實現(xiàn).

XMLHttpRequest實現(xiàn)異步下載驳概,我們需要將xhr的響應(yīng)類型設(shè)置為blog(responseType = "blob")赤嚼,在xhr的load事件中處理響應(yīng),并實現(xiàn)文件的保存顺又。

下載的JS代碼

jQuery(function() {
    jQuery("#DI_0027_EV02").click(function() {
        var xhr = new XMLHttpRequest();
        var url =  contextPath + DI_GUI_0027_02 + "?eventId=DI_0027_EV02&dataType="+dataType+"&deleteMode=02";
        xhr.open("GET",url);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.responseType = "blob";
        xhr.addEventListener("loadstart", function(ev) {
            // 開始下載事件:下載進度條的顯示
            jQuery('div.progress-bar').css('width',"0%").find("span").text("0/0");
            jQuery('#progressModal').modal('toggle');
        });
        xhr.addEventListener("progress", function(ev) {
            // 下載中事件:計算下載進度
            var max   = ev.total;
            var value = ev.loaded;
            var width = value/max*100;
            jQuery('div.progress-bar').css('width',width+"%").find("span").text(value+"/"+max);
        });
        xhr.addEventListener("load", function(ev) {
            // 下載完成事件:處理下載文件
            processRequest(xhr);
        });
         xhr.addEventListener("loadend", function(ev) {
            // 結(jié)束下載事件:下載進度條的關(guān)閉
            jQuery('#progressModal').modal('toggle');
        });
        xhr.addEventListener("error", function(ev) {
            jQuery('#progressModal').modal('hide');
            common.showMessage(ev.error.message,false);
        });
        xhr.addEventListener("abort", function(ev) {
            jQuery('#progressModal').modal('hide');
            common.showMessage(ev.error.message,false);
        });
        xhr.send();
    });
});

通過響應(yīng)的頭信息獲取下載的文件格式和文件名更卒,這里我們下載的是Excel表格,根據(jù)需要更改稚照。

處理響應(yīng)內(nèi)容代碼

function processRequest(xhr){
    if (xhr.status == 200) { 
        var response = xhr.response;  
        var contentType = xhr.getResponseHeader("Content-Type");
        if(contentType.split(";")[0] == "application/json"){
            var reader = new FileReader();
            reader.readAsText(response);
            reader.onload = function (oFREvent) {
                common.showMessage(JSON.parse(reader.result).error.message,false);
            };
        } else if (contentType.split(";")[0] == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
            var fileName =  xhr.getResponseHeader("content-disposition").split("UTF-8''")[1];
            saveFile(response, decodeURI(fileName))
        }
    }else{
        jQuery('#progressModal').modal('hide');
        var response = xhr.response;  
        var contentType = xhr.getResponseHeader("Content-Type")
        if(contentType.split(";")[0] == "application/json"){
            var reader = new FileReader();
            reader.readAsText(response);
            reader.onload = function (oFREvent) {
                common.showMessage(JSON.parse(reader.result).error.message,false);
            };
        }
    }
}

拿到文件格式和文件內(nèi)容后蹂空,我們需要根據(jù)瀏覽器來實現(xiàn)文件的保存,這個部分花了很多時間研究果录。因為各個瀏覽器不同上枕,因此我們需要根據(jù)不同的瀏覽器實現(xiàn)文件的保存。以下代碼在Firefox雕憔,Chrome姿骏,IE和Edge中測試成功。

文件保存代碼

function saveFile(blob, fileName){
    var b = getBrowser();
    if(b =="Chrome"){
        var link = document.createElement('a');
        var file = new Blob([blob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        link.href = window.URL.createObjectURL(file);
        link.download = fileName;
        link.click(); 
    } else if(b =="Firefox"){
        var file = new File([blob], fileName, { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        var url = URL.createObjectURL(file);
        //window.location.href = url;
        parent.location.href = url;
    } else if(b=="IE"){
        var file = new Blob([blob], { type: 'application/force-download' });
        window.navigator.msSaveBlob(file, fileName);
    }
}

判斷瀏覽器類型

function getBrowser() {  
    var ua = window.navigator.userAgent;  
    //var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1;  
    var isIE = !!window.ActiveXObject || "ActiveXObject" in window;
    var isFirefox = ua.indexOf("Firefox") != -1;  
    var isOpera = window.opr != undefined;  
    var isChrome = ua.indexOf("Chrome") && window.chrome;  
    var isSafari = ua.indexOf("Safari") != -1 && ua.indexOf("Version") != -1;  
    if (isIE) {  
        return "IE";  
    } else if (isFirefox) {  
        return "Firefox";  
    } else if (isOpera) {  
        return "Opera";  
    } else if (isChrome) {  
        return "Chrome";  
    } else if (isSafari) {  
        return "Safari";  
    } else {  
        return "Unkown";  
    }  
} 

到此XMLHttpRequest異步下載前臺代碼已全部實現(xiàn)斤彼。
項目用的是Java Web分瘦,框架是Spring MVC和Mybatis。

后臺代碼

@RequestMapping(PageUrlConstants.VP_GUI_0008_SCRATCH_EXPORT)
    public void downloadFile(HttpServletRequest request, HttpServletResponse response) throws Exception {
        init(request);
        String vnfTaskId = request.getParameter(PARAM_VNF_TASK_ID);
        String definitionBodyId = request.getParameter(PARAM_DEFINITION_BODY_ID);
        OutputStream out = null;
        // 1) 定義體?コマンドテーブルを検索する琉苇。
        Map<String, Object> result = definitionBodyDetailInputService.downloadDefinitionBodyDetailInput(vnfTaskId, definitionBodyId);
        // 2) 処理1)で取得した定義體?コマンド.データ"をxmlファイルに出力する嘲玫。
        String definitionBodyName = "";
        String data = "";
        if (null != result) {
            definitionBodyName = (String) result.get(KEY_DEFINITION_BODY_NAME);
            data = (String) result.get(KEY_DATA);
        }

        // ファイル名: <1)で取得した 定義體マスタ.定義體名>_<YYYYMMDDhhmmss>.xml
        //String dateFormat = "YYYYMMDDhhmmss";
        //artf212696
        DateFormat df = new SimpleDateFormat(DatetimeConstants.DATE_FORMAT_STYLE_C);
        Date currentDate = new Date();
        String dateString = df.format(currentDate);
        String fileName = definitionBodyName + "_" + dateString + ".xml";
        if (null == data) {
            data = " ";
        }
        // 3) ファイルを、Windows端末にダウンロードするためのダウンロードダイアログを表示する并扇。
        InputStream ins = new ByteArrayInputStream(data.getBytes());
        //artf214128
        String userAgent = request.getHeader("User-Agent");
        byte[] bytes = userAgent.contains("MSIE") ? fileName.getBytes() : fileName.getBytes("UTF-8");
        fileName = new String(bytes, "ISO-8859-1"); 
        response.setHeader("Content-disposition",String.format("attachment; filename=\"%s\"", fileName));
        //response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(fileName, ENCODE_UTF_8));
        out = response.getOutputStream();
        byte[] b = new byte[1024];
        int len = -1;
        while ((len = ins.read(b)) != -1) {
            out.write(b, 0, len);
        }
        out.flush();
        out.close();
        ins.close();
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末去团,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子穷蛹,更是在濱河造成了極大的恐慌土陪,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肴熏,死亡現(xiàn)場離奇詭異鬼雀,居然都是意外死亡,警方通過查閱死者的電腦和手機蛙吏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門源哩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鸦做,你說我怎么就攤上這事励烦。” “怎么了泼诱?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵坛掠,是天一觀的道長。 經(jīng)常有香客問我,道長却音,這世上最難降的妖魔是什么改抡? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮系瓢,結(jié)果婚禮上阿纤,老公的妹妹穿的比我還像新娘。我一直安慰自己夷陋,他們只是感情好欠拾,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著骗绕,像睡著了一般藐窄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上酬土,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天荆忍,我揣著相機與錄音,去河邊找鬼撤缴。 笑死刹枉,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的屈呕。 我是一名探鬼主播微宝,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼虎眨!你這毒婦竟也來了蟋软?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤嗽桩,失蹤者是張志新(化名)和其女友劉穎岳守,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碌冶,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡棺耍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了种樱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡俊卤,死狀恐怖嫩挤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情消恍,我是刑警寧澤岂昭,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站狠怨,受9級特大地震影響约啊,放射性物質(zhì)發(fā)生泄漏邑遏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一恰矩、第九天 我趴在偏房一處隱蔽的房頂上張望记盒。 院中可真熱鬧,春花似錦外傅、人聲如沸纪吮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碾盟。三九已至,卻和暖如春技竟,著一層夾襖步出監(jiān)牢的瞬間冰肴,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工榔组, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留熙尉,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓瓷患,卻偏偏與公主長得像骡尽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子擅编,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 本文詳細介紹了 XMLHttpRequest 相關(guān)知識攀细,涉及內(nèi)容: AJAX、XMLHTTP爱态、XMLHttpReq...
    semlinker閱讀 13,632評論 2 18
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest谭贪,但細究起來它們兩個是...
    changxiaonan閱讀 2,229評論 0 2
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,179評論 0 7
  • 看到標題時俭识,有些同學(xué)可能會想:“我已經(jīng)用xhr成功地發(fā)過很多個Ajax請求了,對它的基本操作已經(jīng)算挺熟練了洞渔√酌模” 我...
    前端渣渣閱讀 5,755評論 1 12
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)磁椒,斷路器堤瘤,智...
    卡卡羅2017閱讀 134,628評論 18 139