wojtekmaj/react-pdf

这是什么？

核心功能

• 01通过 Document 和 Page 组件以 React 方式逐页渲染 PDF。
• 02支持 URL、base64、Uint8Array 和导入文件等多种数据源。
• 03与 React Suspense 和 Error Boundary 集成，并可切换为传统 loading 和 error 属性。
• 04通过可选样式表支持注释（如链接）和文本层。
• 05可配置 cMap、WebAssembly 解码器和标准字体，以正确显示非拉丁文字及特殊图片。

适用场景

• 在 React Web 应用中展示上传或托管的合同、报告等 PDF 文档。
• 构建带翻页导航和密码输入的自定义 PDF 阅读器。
• 用缩略图和目录侧边栏展示 PDF 预览。

快速上手

1. 1

   使用 npm 安装 React-PDF

   npm install react-pdf
2. 2

   导入 Document 和 Page，并在 Suspense 与错误边界中渲染 PDF

3. 3

   在渲染 PDF 组件的同一模块中配置 PDF.js worker

使用前须知

• !最新版本需要 React 19 或更高版本。
• !需要 Node.js 22.13.0 或更高版本。
• !需要额外配置 PDF.js worker，若要支持非拉丁字符还需配置 cMaps。

收录于专题

标签

常见问题

react-pdf 是什么？

在 React 应用中像显示图片一样渲染 PDF 文件的组件库，基于 PDF.js。 React-PDF 让 React 应用能够显示已有的 PDF 文档。开发者使用 Document 组件传入 URL、base64 字符串、Uint8Array 或导入的文件作为数据源，再在其中放置 Page 组件逐页渲染。它专注于查看 PDF，如果需要用 React 生成 PDF，项目方向读者使用 @react-pdf/renderer。

react-pdf 可以免费使用吗？用的什么许可证？

react-pdf 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

react-pdf 还在维护吗？

活跃维护中。react-pdf 最近一次提交是在 2026年10月28日。

react-pdf 适合用来做什么？

在 React Web 应用中展示上传或托管的合同、报告等 PDF 文档。 构建带翻页导航和密码输入的自定义 PDF 阅读器。 用缩略图和目录侧边栏展示 PDF 预览。

react-pdf 怎么安装和运行？

使用 npm 安装 React-PDF: npm install react-pdf 导入 Document 和 Page，并在 Suspense 与错误边界中渲染 PDF 在渲染 PDF 组件的同一模块中配置 PDF.js worker

在哪里获取 react-pdf？

源代码和安装说明在 GitHub 上：https://github.com/wojtekmaj/react-pdf