使用react-pdf展示简历时页面重复滚动异常问题求助

问题现象 #

使用react-pdf嵌入简历PDF时，当前浏览的页面底部会重复显示页面起始部分的内容（如第一页底部出现重复的页面开头内容）。

可能的解决方案 #

1. 排查PDF文件本身问题 #

先单独打开你的resume.pdf文件，确认PDF自身是否存在页面内容重复、页边距异常或排版错误的情况。如果PDF本身有问题，需要重新生成或修复PDF文件。

2. 调整Page组件的尺寸属性 #

当前代码中给Page组件设置了固定height='950'，可能因尺寸比例不匹配导致渲染异常：

• 尝试移除固定height，改用scale属性控制缩放（比如scale={1.2}），让PDF按原比例渲染：

<Page 
  pageNumber={pageNumber}
  scale={1.2}
></Page>

• 或者设置height为相对值，同时确保容器有合适的高度限制：

<Page 
  pageNumber={pageNumber}
  height="100%"
></Page>

3. 检查CSS样式冲突 #

暂时移除import './Resume.css';，确认是否是自定义CSS导致的渲染异常：

• 比如resumeContainer的padding、margin或overflow属性可能干扰PDF渲染；
• 全局CSS的box-sizing重置也可能引发问题，可以给resumeContainer添加box-sizing: content-box;样式测试。

4. 尝试切换渲染模式 #

react-pdf的Page组件支持不同渲染模式，默认是canvas，可以尝试切换为svg模式：

<Page 
  pageNumber={pageNumber}
  height='950'
  renderMode="svg"
></Page>

5. 更新react-pdf版本 #

可能是版本bug导致的问题，执行命令更新到最新版本：

npm update react-pdf

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