ASP.NET Core MVC中Ajax加载PDF显示空白页问题求助

我在ASP.NET Core MVC应用中尝试通过Ajax调用控制器获取PDF字节数组，在浏览器中显示PDF文档，但打开的文档是空白页，希望找到问题原因。

控制器代码 #

using Microsoft.AspNetCore.Mvc;

public IActionResult DisplayDocument(string documentID) 
{
   byte[] pdfBytes = System.IO.File.ReadAllBytes(@"C:\Info\sample1.pdf");
   return File(pdfBytes, "application/pdf");
}

Ajax调用代码 #

$.ajax({
   url: '@Url.Action("DisplayDocument", "Document")',
   data: { 'documentID': docid },
   method: 'GET',
   responseType: 'arraybuffer', 
   success: function (response, status, xhr) {
      var blob = new Blob([response], { type: 'application/pdf' });
      var url = URL.createObjectURL(blob);
      window.open(url,'_blank');
   },
   error: ...
});

观察到的数据 #

• 原PDF文件大小：54Kb
• 控制器中字节数组：54641字节
• 控制器返回的FileContentResult：54641字节
• Ajax中response.size：52187字节
• blob.size：92736字节
• blob.type：'application/pdf'

问题原因及解决方案 #

问题根源 #

jQuery的Ajax对responseType: 'arraybuffer'的支持存在缺陷，默认会将响应内容当作UTF-8字符串解析，导致二进制数据被损坏。这就是你看到响应大小与原数据不一致、最终生成的Blob无法被PDF阅读器正确解析的原因。

解决方案1：直接跳转URL（推荐） #

无需使用Ajax，直接让浏览器请求控制器的PDF接口，浏览器会自动处理PDF渲染：

window.open('@Url.Action("DisplayDocument", "Document")?documentID=' + docid, '_blank');

解决方案2：使用原生XMLHttpRequest替代jQuery Ajax #

如果必须使用异步请求，改用原生XHR确保正确处理二进制数据：

var xhr = new XMLHttpRequest();
xhr.open('GET', '@Url.Action("DisplayDocument", "Document")?documentID=' + docid, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function() {
    if (this.status === 200) {
        var blob = new Blob([this.response], { type: 'application/pdf' });
        var url = URL.createObjectURL(blob);
        window.open(url, '_blank');
    }
};

xhr.send();

内容的提问来源于stack exchange，提问作者BobC