常见Ajax下载文件方式以及报错解决办法
本文介绍两种通过Ajax下载文件的方法：jQuery AJAX设置responseType为blob，以及原生XMLHttpRequest。针对大文件下载时XMLHttpRequest status为0的报错，指出需检查后端Response.Buffer属性。设置为false可启用分片下载并避免内存溢出，同时提供ASP.NET中相关配置说明及代码示例。
jQuery Ajax下载文件方法
第一种方式是利用jQuery Ajax实现。后台返回bufferArray数据，前端需将req.responseType设置为'blob'。若后端未明确指定返回File()类型，默认会按字节数组arraybuffer返回，此时前端必须手动将其转换为Blob对象才能正常处理。
// 点击下载按钮时触发
$("#download-btn").click(function() {
// 发送 AJAX 请求获取字节数组
$.ajax({
url: url,
type: "GET",
xhrFields: { responseType: "blob" },
success: function (response, status) {
var blob = new Blob([response], { type: "application/pdf" });// 此转换为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下载文件方法
第二种方式是使用原生的XmlHttpRequest对象进行文件下载。
在使用该方法时，需将req.responseType设置为'blob'。设置完成后，可直接使用window.URL.createObjectURL(req.response)生成下载链接，无需再进行额外的Blob转换操作。
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);
//}
} //下载监听
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();大文件下载报错及Response.Buffer设置
如果在执行过程中出现以下报错信息：
此时应检查后端Response.Buffer的值。当资源文件体积过大时，若服务端配置为一次性缓存并响应，会导致前端在req.send()发送请求时发生错误。这种情况下，XMLHttpRequest的status值会显示为0而非预期的200。
针对上述问题，解决方法1如下：
Response.Buffer = false;说明：将Response.Buffer设置为false后，即可支持分片下载，同时也适用于需要显示下载进度的场景。
在ASP.NET环境中，Response.Buffer属性用于指定服务器是否在内存中缓存输出内容。若设置为true，服务器会将整个响应缓存在内存中，待服务端代码执行完毕后，一次性发送给客户端。这种方式有助于提升性能，减少网络流量和延迟。然而，对于大型文件或耗时较长的操作，可能会导致服务器资源耗尽。
若将Response.Buffer设置为false，服务器将逐步向客户端发送输出内容，无需等待整个响应完全生成。这种方法能更快开始发送响应，并降低服务器内存占用。但需注意，这可能导致响应速度变慢或出现分段传输，从而在一定程度上影响用户体验。
在ASP.NET MVC框架中，默认情况下Response.Buffer已设置为true，因此在大多数常规场景下，无需显式进行设置。
解决方法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);总结：
至此，关于常见Ajax下载文件方式及报错解决办法的介绍已完成。如需了解更多Ajax下载文件及相关报错内容，请搜索本站历史文章或继续浏览后续相关文章。希望大家今后多多支持本站！
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办？常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js，怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26