反应 PDF 查看器
在您的 React 应用程序中嵌入 PDF 文件的简单方法, 包括一个完整、 随时可用的界面 .
页:1
完全通过,先进的例子,和API的参考文献,在我们的文件网站上:
👉 https://www.embedpdf.com/resact-pdf-viewer (中文(简体) )
导 言
这个 @embedpdf/react-pdf-viewer 软件包为 React 应用程序提供了完整、生产准备的 PDF 查看体验.
它被设计成最快的方式 让一个高质量的 PDF 查看器进入您的应用程序。 你不需要建立工具栏,处理布局逻辑, 或担心CSS——它只是工作.
关键特性
- 准备使用 包括被打磨的工具栏、边栏和缩略图.
- 响应 ——能无缝地适应移动和桌面屏幕.
- 主题 ——内置灯光/暗色模式及支持自定义品牌颜色.
- 可配置 ——轻松地禁用你不需要的特性(如打印或下载).
- 类型脚本 ——为优秀的开发者体验打出满打字.
- 下一个. Js 准备 - 与Next.js App路由器和SSR毫无瑕疵地工作.
* 安装
npm install @embedpdf/react-pdf-viewer
# or
pnpm add @embedpdf/react-pdf-viewer
# or
yarn add @embedpdf/react-pdf-viewer
基本用途
导入 PDFViewer 组件,并带有PDF来源.
import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function App() {
return (
<div style={{ height: '100vh' }}>
<PDFViewer
config={{
src: 'https://snippet.embedpdf.com/ebook.pdf',
theme: { preference: 'light' },
}}
/>
</div>
);
}
就这样! 您现在有一个功能完备的 PDF 查看器 .
Next.js App路由器
该组件与Next.js无缝地工作. 由于它使用浏览器APIs(Canvas, WebAssembly),所以确保用在一个 客户部分数字 :
'use client';
import { PDFViewer } from '@embedpdf/react-pdf-viewer';
export default function ViewerPage() {
return (
<div style={{ height: '100vh' }}>
<PDFViewer
config={{
src: 'https://snippet.embedpdf.com/ebook.pdf',
}}
/>
</div>
);
}
🎨自定义
主题
取景器包括一个强大的主题系统. 您可以设置偏好 'light', (中文(简体) ), 'dark',或 'system',甚至覆盖特定的颜色来匹配你的品牌.
<PDFViewer
config={{
src: '/document.pdf',
theme: {
preference: 'system',
light: {
accent: {
primary: '#9333ea', // Custom brand color (Purple)
},
},
},
}}
/>
残疾特征
方便定制用户界面,通过功能化功能,您不需要这些功能 disabledCategories 选项 :
<PDFViewer
config={{
src: '/document.pdf',
disabledCategories: ['annotation', 'print', 'export'],
}}
/>
现有类别包括: zoom, (中文(简体) ), annotation, (中文(简体) ), redaction, (中文(简体) ), document, (中文(简体) ), page, (中文(简体) ), panel, (中文(简体) ), tools, (中文(简体) ), selection,以及 history。 。 。 .
QQ 配置选项
这个 config prop 接受以下顶级选项 :
| 选项 | 类型 | 说明 |
|---|---|---|
src | string | PDF 文档的 URL 或路径. |
theme | object | 主题配置( 首选, 覆盖) . |
tabBar | 'always' | 'multiple' | 'never' | 控制文档标签栏的能见度 . |
disabledCategories | string[] | 按类别隐藏特定的UI特性. |
i18n | object | 配置本地和翻译 . |
annotations | object | 配置注释默认值( 作者, 工具) . |
zoom | object | 配置默认缩放级别和限制 . |
scroll | object | 配置滚动方向和逻辑 . |
访问引擎和注册
对于高级用例,您可以使用参考文献访问基本的PDFium引擎或插件注册.
import { useRef } from 'react';
import { PDFViewer, PDFViewerRef } from '@embedpdf/react-pdf-viewer';
function App() {
const viewerRef = useRef<PDFViewerRef>(null);
const getMetadata = async () => {
// Access the plugin registry
const registry = await viewerRef.current?.registry;
if (!registry) return;
// Access the engine directly
const engine = registry.getEngine();
console.log('Engine ready:', engine);
};
return (
<>
<button onClick={getMetadata}>Get Metadata</button>
<PDFViewer ref={viewerRef} config={{ src: '/doc.pdf' }} />
</>
);
}
QQ 无头模式
需要完全控制UI吗? 打造定制设计系统??
看看我们 无头组件 提供了没有UI的钩和逻辑:
npm install @embedpdf/core @embedpdf/plugin-zoom ...
读取 无头文档 更多细节.
许可证
嵌入PDF为 麻省理工学院执照商业用途是受欢迎的——保持版权标题完整.