DEV Community
·
📄 如何在React中实现带页面导航的PDF查看器
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在React应用中，使用@react-pdf-viewer显示PDF并跳转到特定页面非常简单。只需安装相关包，设置PDFViewer组件，传入文档URL和目标页码即可，提升用户体验。
🎯
关键要点
- 在React应用中使用@react-pdf-viewer显示PDF非常简单。
- 需要安装@react-pdf-viewer/core、@react-pdf-viewer/page-navigation和pdfjs-dist等相关包。
- PDFViewer组件可以加载PDF文件并允许跳转到特定页面。
- 使用pageNavigationPlugin插件来实现页面导航功能。
- 通过useEffect钩子，当pageNumber更新时，查看器会自动跳转到该页面。
- 使用示例：<PDFViewer docUrl='https://example.com/sample.pdf' pageNumber={5} />将打开PDF并自动跳转到第5页。
- 使用@react-pdf-viewer可以轻松集成PDF查看器，提升用户体验。
❓
延伸问答
如何在React中使用@react-pdf-viewer显示PDF文件？
只需安装@react-pdf-viewer/core、@react-pdf-viewer/page-navigation和pdfjs-dist等包，然后设置PDFViewer组件，传入文档URL即可。
如何实现PDF查看器的页面导航功能？
使用pageNavigationPlugin插件可以实现页面导航功能，结合useEffect钩子，当pageNumber更新时，查看器会自动跳转到该页面。
在React中如何跳转到特定的PDF页面？
在PDFViewer组件中设置pageNumber属性为目标页码，查看器会自动跳转到该页面。
使用@react-pdf-viewer的好处是什么？
使用@react-pdf-viewer可以轻松集成PDF查看器，提升用户体验，允许用户动态跳转到特定页面。
如何在PDFViewer组件中处理没有文档URL的情况？
如果没有提供文档URL，组件会显示一条提示信息，告知用户未提供文档URL。
如何在React应用中安装@react-pdf-viewer相关包？
可以通过npm命令安装相关包：npm install @react-pdf-viewer/core @react-pdf-viewer/page-navigation pdfjs-dist。
➡️
