React中查看Base64编码PDF失败，求有效解决方案

可能的问题原因 #

• Base64字符串包含前缀未处理：你的Base64字符串可能带有data:application/pdf;base64,这类前缀，但代码直接用atob(img)解码，会导致解码出的字节数据错误，生成的Blob无效，react-pdf无法识别。而在线转换工具会自动忽略前缀，所以能正常生成PDF。
• react-pdf渲染容器无高度：如果Document或Page组件的外层容器没有设置高度，PDF内容可能已经渲染但无法显示，看起来像是“无法显示”。

修复现有代码的方案 #

1. 处理Base64前缀 #

修改Base64转Blob的代码，先移除可能存在的前缀：

let base64Str = img;
// 检查并移除data URI前缀
if (base64Str.startsWith('data:')) {
  base64Str = base64Str.split(',')[1];
}

const byteCharacters = atob(base64Str);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], {type: "application/pdf"});
const url = URL.createObjectURL(blob);
this.setState({imgData: url});

2. 给react-pdf设置容器高度 #

在render中给PDF组件添加带高度的容器：

<div style={{ height: '80vh', width: '100%' }}>
  <Document file={this.state.imgData}>
    <Page pageNumber={1} />
  </Document>
</div>

其他可行实现方式 #

方式一：直接使用Base64字符串作为react-pdf数据源 #

如果你的Base64字符串带有完整的data URI前缀（data:application/pdf;base64,...），可以直接传给react-pdf的file属性，省去转Blob的步骤：

<div style={{ height: '80vh' }}>
  <Document file={img}>
    <Page pageNumber={1} />
  </Document>
</div>

方式二：用iframe渲染PDF #

不依赖react-pdf，直接通过iframe加载Blob URL或Base64 data URI，兼容性更好：

// 转Blob后用URL加载
<iframe 
  src={this.state.imgData} 
  style={{ width: '100%', height: '80vh', border: 'none' }}
  title="PDF预览"
/>

// 或直接用带前缀的Base64字符串
<iframe 
  src={img} 
  style={{ width: '100%', height: '80vh', border: 'none' }}
  title="PDF预览"
/>

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