1. 程式人生 > >XMLHttpRequest下載並生成檔案

XMLHttpRequest下載並生成檔案

近期由於系統匯出excel響應時間略長,防止使用者不斷點選請求,考慮加個載入進度條。

是用XMLHttpRequest自帶的progress屬性來監聽載入進度,但期間產生了一個問題,XMLHttpRequest請求返回的內容無法生成我們需要的excel檔案,故查閱資料後作瞭如下修改。

function download(url){

var xhh = new XMLHttpRequest();

page_url = url;
xhh.open("post", page_url);

xhh.responseType = 'blob';
    xhh.onreadystatechange = function () {
        if (xhh.readyState === 4 && xhh.status === 200) {
       

var name = xhh.getResponseHeader("Content-disposition");
        var filename = name.substring(20,name.length);
            var blob = new Blob([xhh.response], {type: 'text/xls'});
            var csvUrl = URL.createObjectURL(blob);
            var link = document.createElement('a');
            link.href = csvUrl;
            link.download = filename;
            link.click();
          
        }
    };
    xhh.send();
}

這段程式碼把response返回的二進位制檔案放到blob,在通過url去下載,filename是伺服器中寫定的檔名,