第一种 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对象
下面 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 值，资源文件一版过大在服务端会缓存一次性响应到前端就会导致blob在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);
参考阅读
您阅读本篇文章共花了：
发表评论