文件流下載

 

 后台接口傳過來的文件流。

1.直接打開這個接口拼參數，局限：get請求，無法攜帶token

如

 

 2.通過請求接口，用blob和URL.createObjectURL(blob)來下載文件

踩到的一個坑：使用ajax請求下來的文件，文件一般都會無法打開或者亂碼

原因：因為response原因，一般請求瀏覽器是會處理服務器輸出的response，例如生成png、文件下載等,然而ajax請求只是個“字符型”的請求，即請求的內容是以文本類型存放的。

文件的下載是以二進制形式進行的，雖然可以讀取到返回的response，但只是讀取而已，是無法執行的，說白點就是js無法調用到瀏覽器的下載處理機制和程序。

解決：使用xhr去請求接口

具體代碼如下：

var xhr = new XMLHttpRequest();
    xhr.open("GET", `/api/total/exportExcel?month=${$(this).data("month")}&factory=${$(this).data("factory")}`, true);
    var name = $(this).data("factory") + getDays($(this).data("month"));
    xhr.setRequestHeader("token", window.localStorage.getItem("token"));
    xhr.responseType = "blob";
    xhr.onload = function(oEvent) {
            var content = xhr.response;
            var fileName = `${name}.xlsx`; // 保存的文件名
            var elink = document.createElement('a');
            elink.download = fileName;
            elink.style.display = 'none';
            var blob = new Blob([content]);
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
    };
    xhr.send();

即可

補充：post的話

var xhr = new XMLHttpRequest();
    xhr.open("POST", "接口地址", true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.setRequestHeader("token", window.localStorage.getItem("orderToken"));
    xhr.responseType = "blob";
    xhr.onload = function(oEvent) {
        var content = xhr.response;
                var fileName = `${name}.xlsx`; // 保存的文件名
                var elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                var blob = new Blob([content]);
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                document.body.removeChild(elink);
    };
    xhr.send("參數");

 

下載成blob類型的文件，可以通過類型判斷

 

 判斷是json還是其他類型的

 

要還原json的數據：

 

 用new FileReader()