react如何预览远程的pdf
使用react-pdf预览远程PDF
安装react-pdf库
npm install @react-pdf/renderer引入PDFViewer组件
import { PDFViewer } from '@react-pdf/renderer';渲染PDF查看器
<PDFViewer width="100%" height="600px">
<Document file="http://example.com/document.pdf">
<Page pageNumber={1} />
</Document>
</PDFViewer>使用PDF.js预览远程PDF
安装pdfjs-dist
npm install pdfjs-dist创建PDF查看组件
import { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
function PDFViewer({ url }) {
const canvasRef = useRef(null);
useEffect(() => {
const loadPDF = async () => {
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 = canvasRef.current;
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
await page.render(renderContext).promise;
};
loadPDF();
}, [url]);
return <canvas ref={canvasRef} />;
}使用iframe嵌入PDF
简单直接的方法
<iframe
src="http://example.com/document.pdf"
width="100%"
height="600px"
title="PDF Viewer"
/>使用Google Docs查看器
通过Google Docs服务嵌入
<iframe
src={`https://docs.google.com/viewer?url=${encodeURIComponent('http://example.com/document.pdf')}&embedded=true`}
width="100%"
height="600px"
frameBorder="0"
/>注意事项
确保远程PDF服务器配置了CORS头部，允许从你的域名访问
对于大文件PDF，考虑实现分页加载功能
某些浏览器可能需要PDF插件才能正确显示
react-pdf更适合生成PDF，而PDF.js更适合渲染现有PDF
考虑添加加载状态和错误处理以改善用户体验
