Examples
PDF Viewer 演示
展示 PDF 查看器组件
PDF Viewer 组件演示
本页面展示两种 PDF 查看器组件。
1. 标准 PDF 查看器
功能齐全的 PDF 查看器,包含工具栏、下载、新标签页打开和全屏模式。
IWR6843AOP 数据手册
使用方法
<PDFViewer
src="/pdfs/your-document.pdf"
title="文档标题"
height="800px"
/>2. 简洁版 PDF 查看器
轻量级设计,不带工具栏,适合简单的文档展示。
使用方法
<PDFViewerSimple
src="/pdfs/your-document.pdf"
height="600px"
/>组件对比
| 特性 | PDFViewerSimple | PDFViewer |
|---|---|---|
| 基础展示 | ✅ | ✅ |
| 工具栏 | ❌ | ✅ |
| 下载按钮 | ❌ | ✅ |
| 新标签打开 | ❌ | ✅ |
| 全屏模式 | ❌ | ✅ |
选择指南
- PDFViewerSimple: 适合简单的文档嵌入,不需要额外功能
- PDFViewer: 适合大多数场景,提供基础的用户交互
Props 说明
PDFViewer
src(string, 必需): PDF 文件路径title(string, 可选): 工具栏标题,默认 "PDF Document"height(string, 可选): 查看器高度,默认 "800px"className(string, 可选): 自定义 CSS 类名
PDFViewerSimple
src(string, 必需): PDF 文件路径height(string, 可选): 查看器高度,默认 "600px"className(string, 可选): 自定义 CSS 类名