移动端用IFrame/Object显示Base64格式PDF兼容性问题咨询

DevOps 小满

2026-6-17

移动端Base64格式PDF展示问题排查与解决

问题描述

在基于Base64内容展示PDF时遇到以下兼容性问题：

使用<object>元素：Safari浏览器仅显示灰色界面；桌面端Chrome可正常展示，但移动端Chrome无法使用
改用<iframe>元素：Safari可正常展示，但移动端Chrome仍不支持

使用的<iframe>代码如下：

<iframe
  aria-label="contract"
  width={'100%'}
  title="pdf-container"
  src={`data:${contentType};base64,${contentBase64}`}
  height="440px"
  name={fileData?.name}
>
  <p>{'Document not found'}</p>
</iframe>

原因分析

这并非操作失误，而是移动端浏览器对Data URI格式PDF的支持限制导致：

移动端Chrome（含Android Chrome）出于性能与安全考量，默认不支持通过Data URI加载PDF，尤其是大体积的Base64编码内容
Safari移动端对Data URI的支持相对友好，但<object>元素本身在Safari中处理PDF的兼容性不如<iframe>

解决方案

方法1：转为Blob URL加载（推荐）

将Base64字符串转为Blob对象，再生成Blob URL供<iframe>使用，这是当前移动端兼容性最优的方案：

// 转换Base64为Blob
const blob = new Blob(
  [Uint8Array.from(atob(contentBase64), c => c.charCodeAt(0))],
  { type: contentType }
);
const blobUrl = URL.createObjectURL(blob);

// 在iframe中使用
<iframe
  aria-label="contract"
  width={'100%'}
  title="pdf-container"
  src={blobUrl}
  height="440px"
  name={fileData?.name}
  onLoad={() => URL.revokeObjectURL(blobUrl)} // 加载完成后释放资源
>
  <p>Document not found</p>
</iframe>