react-pdf渲染PDF时每页后出现额外HTML页面问题求助

你遇到的每个PDF页面后出现额外HTML页面的问题，核心原因是初始渲染时numPages为null，导致错误渲染了一个无效的Page组件。当组件首次加载，numPages还未从文档加载回调中获取到实际页数时，Array.from(new Array(null))会创建一个长度为1的数组，渲染出一个pageNumber=1的Page组件——此时文档尚未加载完成，这个组件会生成空的HTML结构（即你看到的蓝圈页面）。当文档加载成功后，numPages更新为实际页数，又渲染出所有正确的PDF页面，最终导致页面重复。

解决方案 #

1. 避免初始无效渲染 #

修改PdfViewer组件中页面渲染的逻辑，仅当numPages不为null时才渲染Page组件：

return (
  <div>
    <Document
      file={url}
      onLoadSuccess={onDocumentLoadSuccess}
    >
      {/* 仅当numPages存在时才渲染页面 */}
      {numPages && Array.from(new Array(numPages), (el, index) => (
        <Page key={`page_${index + 1}`} pageNumber={index + 1} />
      ))}
    </Document>
  </div>
);

2. 排查样式冲突 #

检查全局CSS（如App.css）是否存在影响react-pdf组件的样式规则，例如全局div的margin、padding或height设置，可能导致额外空白区域。可以为Page组件添加自定义样式隔离：

<Page 
  key={`page_${index + 1}`} 
  pageNumber={index + 1} 
  style={{ display: 'block', margin: '0 auto', padding: 0 }} 
/>

3. 升级react-pdf版本 #

如果你使用的是旧版react-pdf，可能存在已知的渲染bug。执行以下命令升级到最新稳定版：

npm install react-pdf@latest

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