如何用JavaScript在浏览器显示PDF字节数组、修复黑页及替代createObjectURL

一、PDF内容全黑的修复方案 #

问题核心原因：jQuery的POST请求默认将响应内容解析为UTF-8字符串，原始二进制PDF数据被编码破坏，导致PDF阅读器仅能识别文件头获取页数，内容解码失败显示全黑。

修复步骤 #

仅需修改客户端AJAX请求配置，指定响应类型为二进制Blob即可，服务端代码无需调整：

// 修改后的请求部分代码
var result = $.post({
    url: url,
    type: 'POST',
    data: data,
    // 新增配置，指定响应为原始二进制Blob
    xhrFields: {
        responseType: 'blob'
    }
});

result.done(function (blob) {
    // 无需手动创建Blob，直接使用返回的二进制对象
    var link = window.URL.createObjectURL(blob);
    $("object").attr("data", link);
    // 加载完成后释放ObjectURL，避免内存泄漏
    $("object").on('load', () => {
        window.URL.revokeObjectURL(link);
    });
});

如果使用<object>标签仍有兼容性问题，可替换为<iframe>标签，用法完全一致，主流浏览器兼容性更好。

二、createObjectURL相关说明与优化方案 #

首先纠正认知误区：window.URL.createObjectURL本身并未废弃，仅传入MediaStream参数的用法被废弃，传入Blob的场景完全可以正常使用，只需注意加载完成后调用revokeObjectURL释放内存即可。

如果需要更简洁的实现方案，可根据场景选择以下方式：

• 如果接口参数无敏感信息，可将服务端接口改为支持GET请求，直接将带参数的请求地址赋值给标签的data属性，完全不需要处理二进制逻辑：

  $("object").attr("data", `${url}?ID=@Model.DocID`);
  

  该方案性能最好，代码最简洁，也不存在内存泄漏问题。
• 如果必须使用POST请求（如参数敏感不能外露），可选择Base64 DataURL方案：服务端将PDF字节数组转Base64字符串返回，客户端直接赋值即可：

  result.done(function (base64Str) {
      $("object").attr("data", `data:application/pdf;base64,${base64Str}`);
  });
  

  注意该方案会使数据体积增加33%，仅适合小体积PDF使用。

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