带后端授权的react-pdf使用问题及iframe方案合理性咨询

一、解决react-pdf的401授权问题 #

react-pdf的Document组件的file属性支持传入配置对象，而非仅URL。你可以通过配置fetchOptions让请求自动携带后端管理的Cookie，实现和iframe相同的授权行为：

修改你的Document组件调用代码：

<Document 
  file={{ 
    url, 
    fetchOptions: { 
      credentials: 'include' // 自动携带同域Cookie（包括HttpOnly类型）
    } 
  }} 
  onLoadSuccess={onDocumentLoadSuccess}
>
  <Page pageNumber={pageNumber} scale={pageScale} />
</Document>

该配置会让pdfjs底层的请求自动带上当前域名下的所有Cookie，和浏览器iframe的默认行为一致，从而解决401未授权问题。

如果后端采用Token放在请求头的认证方式（且前端能获取到该Token），也可以通过添加请求头实现授权：

<Document 
  file={{ 
    url, 
    fetchOptions: { 
      headers: {
        'Authorization': `Bearer ${yourToken}`
      }
    } 
  }} 
  onLoadSuccess={onDocumentLoadSuccess}
>
  {/* ... */}
</Document>

二、是否必须继续使用iframe？ #

不需要。通过上述配置，react-pdf可以正常加载需要授权的PDF文件，无需依赖iframe。

三、iframe展示PDF是否属于最佳实践？ #

这取决于你的业务需求：

• 适合用iframe的场景：
  • 仅需要简单展示PDF，无需自定义工具栏、页面操作逻辑
  • 希望快速实现，减少前端依赖和开发成本
  • 依赖浏览器原生PDF渲染能力，兼容性好
• 适合用react-pdf的场景：
  • 需要高度定制化的PDF查看器（比如你当前实现的缩放、分页控制）
  • 需要和React应用深度集成（比如同步状态、自定义样式）
  • 需要获取PDF元数据（如页数、文本内容）进行业务处理

两种方案没有绝对优劣，需根据实际需求选择。

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