通过Blob下载API字节数组响应后PDF为空但页数正常的问题

问题分析 #

你遇到的空PDF但页数正确的情况，大概率是API返回的二进制数据被错误解析成了字符串，导致Blob生成时数据损坏。默认情况下，HTTP请求库（比如Axios）会把响应按JSON/字符串格式解析，二进制字节数组被转成字符串后，再转回Blob就会丢失原始二进制信息，最终PDF只有结构（页数）但无实际内容。

解决方案 #

1. 确保请求时指定响应类型为二进制 #

在调用API时，必须明确设置responseType为'arraybuffer'或'blob'，让请求库直接返回原始二进制数据，而非解析后的字符串。

以Axios为例，修改API调用：

// 假设api()是封装的Axios请求，添加responseType配置
const api = () => axios.get('/your-api-url', { responseType: 'arraybuffer' });

2. 修正Blob生成与下载逻辑 #

拿到正确的二进制数据后，再生成Blob并触发下载。另外，window.open可能被浏览器拦截，用a标签触发下载更稳定：

api().then((res) => {
  // 用原始arraybuffer数据生成Blob
  const myBlob = new Blob([res.data], { type: 'application/pdf' }); // 明确指定PDF类型
  const url = URL.createObjectURL(myBlob);
  
  // 创建a标签触发下载
  const a = document.createElement('a');
  a.href = url;
  a.download = '目标文件名.pdf'; // 指定下载后的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
});

3. 额外排查点 #

• 确认API返回的Content-Type响应头是application/pdf，后端返回类型错误也可能导致解析异常。
• 如果使用fetch请求库，需直接将响应转为arraybuffer：

  fetch('/your-api-url')
    .then(res => res.arrayBuffer())
    .then(data => {
      const blob = new Blob([data], { type: 'application/pdf' });
      // 后续下载逻辑同上
    });
  

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