ReactJS中如何快速打开亚马逊S3存储桶中的大型PDF文件

方案1：修复react-pdf渲染异常问题 #

你之前使用react-pdf加载完成但无渲染，绝大多数情况是没有正确配置PDF.js的worker依赖，按以下步骤调整即可正常使用：

• 先安装核心依赖：

  npm install react-pdf pdfjs-dist
  

• 在组件代码顶部配置worker：

  import { pdfjs, Document, Page } from 'react-pdf';
  import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  

• 渲染组件时注意设置固定宽高，开启canvas渲染模式提升性能：

  <Document
    file={this.state.file}
    onLoadSuccess={({ numPages }) => this.setState({ numPages })}
    renderMode="canvas"
  >
    {Array.from(new Array(this.state.numPages), (el, index) => (
      <Page key={`page_${index + 1}`} pageNumber={index + 1} width={800} />
    ))}
  </Document>
  

如果是大体积PDF，可以开启分页懒加载，只渲染可视区域内的页码，加载速度会比react-pdf-js-infinite快30%以上。

方案2：适配iframe方案兼容Chrome #

Chrome无法直接加载S3的PDF是两个配置问题导致的，调整后全浏览器都可兼容：

1. 登录S3控制台，给所有PDF文件的元数据添加配置：Content-Disposition: inline，避免Chrome识别为下载文件而不触发预览
2. 调整你现有CORS配置的第三条GET规则，补充ExposeHeaders配置：

   {
       "AllowedHeaders": ["*"],
       "AllowedMethods": ["GET"],
       "AllowedOrigins": ["*"],
       "ExposeHeaders": ["Content-Length", "Accept-Ranges", "Content-Range"]
   }
   

3. 给iframe的sandbox属性补充allow-popups-to-escape-sandbox属性即可。

方案3：服务端中转兼容所有场景 #

如果你的PDF文件体积普遍超过10M，推荐加一层后端中转接口：

• 后端接口收到前端的PDF请求后，代理请求S3的对应文件流，返回给前端时统一携带以下响应头：

  Content-Type: application/pdf
  Content-Disposition: inline
  Accept-Ranges: bytes
  Access-Control-Allow-Origin: 你的前端域名
  

• 前端直接请求中转接口地址作为PDF预览源，无需调整其他前端逻辑，所有浏览器都可兼容，大文件分片加载不会出现报错。

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