快捷導(dǎo)航

常見Ajax下載文件方式以及報錯解決辦法

更新時間：2024年01月08日 10:52:41 作者：andy5520

AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建快速、動態(tài)和交互式網(wǎng)頁的技術(shù),它的主要優(yōu)勢在于能夠在不刷新整個網(wǎng)頁的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互,這篇文章主要給大家介紹了關(guān)于常見Ajax下載文件方式以及報錯解決辦法的相關(guān)資料,需要的朋友可以參考下

第一種 Ajax：后臺返回bufferArray ,如果前端req.responseType='blob'未指定后端返回File()類型的時候默認(rèn)按照字節(jié)數(shù)組arraybuffer 返回前端需要前端轉(zhuǎn)為Blob對象

// 點擊下載按鈕時觸發(fā)
$("#download-btn").click(function() {
  // 發(fā)送 AJAX 請求獲取字節(jié)數(shù)組
   $.ajax({
            url: url,
            type: "GET",
            xhrFields: { responseType: "blob" },
            success: function (response, status) {
            
                var blob = new Blob([response], { type: "application/pdf" });// 此轉(zhuǎn)換為xhrFields: { responseType: "arraybuffer" },
                
                var link = document.createElement("a");
                link.href = window.URL.createObjectURL(response);
                link.download = "example.pdf";
                document.body.appendChild(link);
                link.click();
            },
            error: function (xhr, status, error) {
                console.log("Error:", error);
            }
        });
});

后端代碼：

 Response.Headers.Add("fileName", fileExtensionName);
 Response.Buffer = false;
 var bytes = new byte[renderingResult.DocumentBytes.Length];
 renderingResult.DocumentBytes.CopyTo(bytes, 0);
//return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileExtensionName);
 return File(renderingResult.DocumentBytes, renderingResult.MimeType, fileExtensionName);nsionName);

第二種使用XmlHttpRequest對象

下面 req.responseType = "blob"; 設(shè)置成這樣后，window.URL.createObjectURL(req.response); 直接使用不需要進(jìn)行Blob轉(zhuǎn)換

      var req = new XMLHttpRequest();
        req.open("GET", url, true);
        req.responseType = "blob";
        req.onloadstart = function (e) {
            console.log('e.onloadstartloaded', e.loaded)
        }
        req.onprogress = function (e) {
            var pb = $("#progressBar").data("kendoProgressBar");
            var prog = $("#progressBarLoad");

            console.log('e.loaded', e.loaded)
            console.log('e.total', e.total)
            //if (e.lengthComputable) {
            //    pb.value(Math.round(e.loaded * 100 / e.total));
            //    prog.text('done');
            //} else {
            //    prog.text(loaded);
            //}
 
        } //下載監(jiān)聽
        req.onload = function (oEvent) {
            if (req.status === 200) {
                var blob = req.response;
                var blobData = new Blob([req.response]);
                var fileName = req.getResponseHeader("fileName")
                if (fileName) {
                    var link = document.createElement('a');
                    link.href = window.URL.createObjectURL(req.response);
                    link.download = fileName;
                    link.click();
                    link.remove();
                    window.URL.revokeObjectURL(link.href);
                } else {
                    location.reload();
                }
                //kendo.ui.progress(ele, false);
            } else {
                console.log('error')
                kendo.ui.progress(ele, false);
            }
        };
        req.onloadend = function (e) {
            //$("#progressBar").hide();
            $("#progressBarLoad").text('done');
        }
        req.send();

如果出現(xiàn)以下報錯

檢查后端Response.Buffer 值，資源文件一版過大在服務(wù)端會緩存一次性響應(yīng)到前端就會導(dǎo)致blob在req.send() 的時候報錯，XMLHttpRequest 的status=0 而不是200

解決辦法 1.

Response.Buffer = false;

說明：Response.Buffer = false; 則可以進(jìn)行分片下載及需要設(shè)置進(jìn)度條的下載方式

在ASP.NET中，Response.Buffer是用于指定是否在服務(wù)器上緩存輸出內(nèi)容的屬性。如果將其設(shè)置為true，則服務(wù)器將整個響應(yīng)緩存在內(nèi)存中，直到服務(wù)器端代碼執(zhí)行完畢，并將整個響應(yīng)一次性發(fā)送給客戶端。這樣可以提高性能，減少網(wǎng)絡(luò)流量和延遲。但是，對于大型文件或長時間運(yùn)行的操作，可能會導(dǎo)致服務(wù)器資源不足。

如果將Response.Buffer設(shè)置為false，則服務(wù)器將逐步將輸出內(nèi)容發(fā)送到客戶端，而不必等待整個響應(yīng)完全生成。這種方法可以更快地開始發(fā)送響應(yīng)，并減少服務(wù)器使用的內(nèi)存數(shù)量。但是，它可能會導(dǎo)致響應(yīng)變慢或分段傳輸，導(dǎo)致用戶體驗下降。

在ASP.NET MVC中，默認(rèn)情況下，Response.Buffer已經(jīng)設(shè)置為true，因此在大多數(shù)情況下，您不需要顯式設(shè)置它。

解決辦法2：

后端代碼下面的buffer=true或者false不會影響前端接受blob

   var bytes = new byte[renderingResult.DocumentBytes.Length];
            renderingResult.DocumentBytes.CopyTo(bytes, 0);

            Response.Clear();
            Response.ContentType = renderingResult.MimeType;
            Response.Cache.SetCacheability(HttpCacheability.Private);
            Response.Expires = -1;
            Response.Buffer = true;
            Response.BinaryWrite(renderingResult.DocumentBytes);
            Response.Flush();
            Response.End();
            return string.Empty; ;
            //return File(bytes, renderingResult.MimeType);

總結(jié)

到此這篇關(guān)于常見Ajax下載文件方式以及報錯解決辦法的文章就介紹到這了,更多相關(guān)Ajax下載文件及報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: