AngularJS请求生成Blob打开PDF时文件损坏的问题排查

问题原因 #

AngularJS的$http默认会将响应内容解析为字符串，而PDF是二进制文件，字符串编码转换（比如默认的UTF-8解析）会破坏原始二进制字节，后续用TextEncoder再转成字节时，已经丢失了正确的二进制信息，导致PDF内容损坏（页数正确是因为文件头的元数据未被完全破坏，但内容区域的字节已错误）。

解决方案 #

关键是让$http直接返回二进制数组，避免字符串解析步骤：

1. 发起请求时指定responseType为arraybuffer #

这会告诉AngularJS不要解析响应为字符串，直接返回原始的二进制数组。

2. 用arraybuffer直接创建Blob并打开 #

无需经过TextEncoder转换，直接用获取到的arraybuffer创建Blob，指定正确的MIME类型。

完整代码示例 #

$http({
  method: 'GET', // 如果是POST请求，替换为'POST'并添加data参数
  url: 'https://localhost:44300/common/api/report',
  responseType: 'arraybuffer' // 核心配置：获取二进制数组
}).then(function(response) {
  // 用原始二进制数组创建PDF Blob
  const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
  // 创建临时URL
  const pdfUrl = URL.createObjectURL(pdfBlob);
  // 打开新窗口显示PDF
  window.open(pdfUrl);
  
  // 延迟释放URL，避免内存泄漏（可选但推荐）
  setTimeout(() => {
    URL.revokeObjectURL(pdfUrl);
  }, 1000);
});

额外注意事项 #

• 确保后端返回的响应头Content-Type为application/pdf，避免浏览器对响应类型的误判。
• 如果是POST请求，只需保持responseType: 'arraybuffer'配置，其他参数正常传递即可。

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