React生产环境PDF在Chrome中显示异常（Firefox正常）求助

问题背景 #

React应用中，从VM存储的PDF接口获取Blob数据，转成Base64后用<object>标签展示。本地环境一切正常，但生产环境中Chrome浏览器部分PDF显示空白（接口返回HTTP 200，确认文件已成功获取），Firefox则完全正常。

排查思路与解决方案 #

1. 换用Blob URL替代Base64编码

当前用FileReader.readAsDataURL转Base64的方式，大文件或特殊编码PDF容易出现编码不完整的问题，试试直接生成Blob URL：

const displayFile = (res: any) => {
  if (res.data) {
    const file = new Blob([res.data], { type: res.headers["content-type"] });
    const blobUrl = URL.createObjectURL(file);
    setBase64Src(blobUrl);
  }
};

注意：组件卸载时一定要调用URL.revokeObjectURL(base64Src)释放内存，避免内存泄漏。

2. 确认请求的响应类型是否正确

如果用Axios请求PDF，必须设置responseType: 'arraybuffer'，默认的JSON解析会破坏二进制数据，这是生产环境常见的坑：

axios.get('/your-pdf-api', { responseType: 'arraybuffer' })
  .then(res => displayFile(res))
  .catch(err => console.error(err));

3. 替换<object>为<iframe>或优化标签属性

Chrome对<object>的PDF渲染兼容性不如<iframe>，试试替换标签：

<iframe 
  style={{ height: '100%', width: '100%', border: 'none' }} 
  src={base64Src}
  title="PDF Viewer"
/>

如果坚持用<object>，加上明确的type属性和备用内容：

<object 
  style={{ height: '100%', width: '100%' }} 
  data={base64Src}
  type="application/pdf"
>
  <p>无法加载PDF，<a href={base64Src}>点击下载</a>查看</p>
</object>

4. 检查PDF文件本身的兼容性

Chrome内置的PDF阅读器对某些特殊PDF支持不佳，比如带加密、特殊嵌入字体、或版本过旧/过新的文件。把有问题的PDF用Adobe Acrobat导出为PDF/A格式后再测试；或者直接在Chrome中打开本地的该PDF文件，确认是不是Chrome本身不支持这个文件。

5. 排查生产环境的资源处理配置

检查生产环境的CDN、服务器是否对PDF响应做了压缩或转码，导致二进制数据损坏。可以直接在Chrome中下载有问题的PDF，打开查看是否正常：如果下载后能打开，说明是前端渲染环节的问题；如果下载后也打不开，就是服务器返回的文件已经损坏。

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