企业官网建设流程全解析

react-pdf缩略图面板教程：用 构建PDF侧边栏导航

【免费下载链接】react-pdfDisplay PDFs in your React app as easily as if they were images.项目地址: https://gitcode.com/gh_mirrors/rea/react-pdf

react-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 className="sidebar"> {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.tsx）：

<Document file={file} onItemClick={({ pageNumber }) => scrollToPage(pageNumber)} >

回调参数为{ dest, pageIndex, pageNumber }，你可以用它调用window.scrollTo、更新 URL，或操作自己的页面容器。

方式二：单个缩略图绑定回调

如果只想控制某一张缩略图的点击行为，可直接给该组件传onItemClick：

<Thumbnail pageIndex={0} onItemClick={({ pageNumber }) => console.log(pageNumber)} />

📌 若既没有onItemClick也没有linkService，点击缩略图会触发警告，所以两种方式务必配置其一。

第三步：控制缩略图大小，打造整齐面板

<Thumbnail />继承了<Page />的尺寸属性，常用组合：

📐 小技巧：width和scale会相乘生效；同时传width和height时height会被忽略并自动保持比例，详见测试用例 Thumbnail.spec.tsx。

推荐用width固定宽度，再用 CSSdisplay: flex; flex-direction: column; gap: 8px;让缩略图在侧边栏中纵向排列。

常见坑点速查 ⚠️

1. 必须放在<Document />内，或显式传入pdf属性，否则会抛出 "no document was specified" 错误（见 Thumbnail.tsx 中的校验）。
2. pageIndex从 0 开始，pageNumber从 1 开始；同时传两者时pageNumber生效。
3. 缩略图不会成为文档内链接的跳转目标——点击 PDF 内的目录链接时，页面不会滚动到侧边栏缩略图上，这是有意为之的设计。
4. 不传页码时会显示 "No page specified." 占位提示，可通过noData属性自定义文案。

相关文件导航 📁

想深入阅读源码或参考完整示例，可以从以下文件入手：

• 组件实现：Thumbnail.tsx
• 文档容器与 onItemClick：Document.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