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

考虑添加加载状态和错误处理以改善用户体验