react-pdf缩略图面板教程用 构建PDF侧边栏导航【免费下载链接】react-pdfDisplay PDFs in your React app as easily as if they were images.项目地址: https://gitcode.com/gh_mirrors/rea/react-pdfreact-pdf 是一款让 React 应用像渲染图片一样轻松显示 PDF 文件的库。本教程将带你用它内置的 组件快速搭建一个 PDF 缩略图面板实现点击缩略图即可跳转页面的侧边栏导航效果。认识 专为缩略图而生的组件Thumbnail /是 react-pdf 官方导出的核心组件之一见 index.ts它的职责很纯粹✅ 渲染指定页的页面缩略图❌ 不渲染注释层和文本层性能更好也避免了文字漂浮在缩略图上✅ 点击时自动跳转到对应页行为与大纲Outline链接一致你可以在 Thumbnail.tsx 中看到它的实现内部其实包裹了一个Page /组件见 Page.tsx并强制关闭了注释层与文本层的渲染。第一步搭建最小缩略图侧边栏只需要三步导入组件、用Document /包裹、按页数循环渲染Thumbnail /。import { Document, Thumbnail } from react-pdf; function Sidebar({ file, numPages }) { return ( Document file{file} aside classNamesidebar {Array.from({ length: numPages }).map((_, i) ( Thumbnail key{i} pageIndex{i} width{160} / ))} /aside /Document ); } 提示numPages可以从Document /的onLoadSuccess回调中获取回调参数document.numPages即为总页数。第二步让缩略图可点击跳转侧边栏导航核心Thumbnail /提供两种跳转方式二选一即可方式一全局 onItemClick推荐在Document /上统一设置onItemClick回调所有缩略图和大纲的点击都会走这里见 Document.tsxDocument file{file} onItemClick{({ pageNumber }) scrollToPage(pageNumber)} 回调参数为{ dest, pageIndex, pageNumber }你可以用它调用window.scrollTo、更新 URL或操作自己的页面容器。方式二单个缩略图绑定回调如果只想控制某一张缩略图的点击行为可直接给该组件传onItemClickThumbnail pageIndex{0} onItemClick{({ pageNumber }) console.log(pageNumber)} / 若既没有onItemClick也没有linkService点击缩略图会触发警告所以两种方式务必配置其一。第三步控制缩略图大小打造整齐面板Thumbnail /继承了Page /的尺寸属性常用组合属性作用示例width指定缩略图宽度优先级高width{160}height指定缩略图高度height{220}scale按原尺寸等比缩放scale{0.3}rotate旋转页面角度rotate{90} 小技巧width和scale会相乘生效同时传width和height时height会被忽略并自动保持比例详见测试用例 Thumbnail.spec.tsx。推荐用width固定宽度再用 CSSdisplay: flex; flex-direction: column; gap: 8px;让缩略图在侧边栏中纵向排列。常见坑点速查 ⚠️必须放在Document /内或显式传入pdf属性否则会抛出 no document was specified 错误见 Thumbnail.tsx 中的校验。pageIndex从 0 开始pageNumber从 1 开始同时传两者时pageNumber生效。缩略图不会成为文档内链接的跳转目标——点击 PDF 内的目录链接时页面不会滚动到侧边栏缩略图上这是有意为之的设计。不传页码时会显示 No page specified. 占位提示可通过noData属性自定义文案。相关文件导航 想深入阅读源码或参考完整示例可以从以下文件入手组件实现Thumbnail.tsx文档容器与 onItemClickDocument.tsx链接跳转服务LinkService.ts官方测试用例覆盖加载、渲染、缩放、点击等场景Thumbnail.spec.tsx可运行的示例应用sample/vite/Sample.tsx、sample/webpack5/Sample.tsx属性完整文档README.md 中的 Thumbnail 章节用Thumbnail /构建缩略图面板不需要任何第三方插件——它天生就是为 PDF 侧边栏导航准备的几十行代码即可让你的 React 应用拥有专业级的 PDF 阅读体验。【免费下载链接】react-pdfDisplay PDFs in your React app as easily as if they were images.项目地址: https://gitcode.com/gh_mirrors/rea/react-pdf创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考