react如何实现pdf预览
实现PDF预览的几种方法
在React中实现PDF预览可以通过多种方式完成，以下是几种常见的方法：
使用react-pdf库
react-pdf是一个流行的React库，用于在浏览器中渲染PDF文件。安装方式如下：
npm install react-pdf基本用法示例：
import { Document, Page } from 'react-pdf';
function PDFViewer() {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);
function onDocumentLoadSuccess({ numPages }) {
setNumPages(numPages);
}
return (
<div>
<Document
file="/example.pdf"
onLoadSuccess={onDocumentLoadSuccess}
>
<Page pageNumber={pageNumber} />
</Document>
<p>Page {pageNumber} of {numPages}</p>
</div>
);
}使用pdf.js直接集成
Mozilla的pdf.js是底层库，可以直接集成到React项目中。安装方式：
npm install pdfjs-dist实现代码示例：
import * as pdfjsLib from 'pdfjs-dist';
async function renderPDF(url, canvasContainer) {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.0 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
}使用iframe嵌入PDF
对于简单的预览需求，可以直接使用iframe：
function PDFViewer() {
return (
<iframe
src="/example.pdf"
width="100%"
height="500px"
/>
);
}使用云服务API
部分云服务提供PDF预览API，如Google Docs Viewer：
function PDFViewer() {
return (
<iframe
src={`https://docs.google.com/viewer?url=${encodeURIComponent('https://example.com/file.pdf')}&embedded=true`}
width="100%"
height="500px"
/>
);
}注意事项
- 大文件处理时考虑分页加载
- 移动端适配需要注意PDF显示尺寸
- 权限控制需确保用户有权访问PDF文件
- 性能优化对于多页文档很重要
以上方法各有优缺点，可根据项目需求选择最适合的方案。react-pdf适合需要高度自定义的场景，iframe方案最简单但功能有限。
