当前位置：首页 > React

react实现df预览

2026-01-27 00:22:30React

使用 react-pdf 预览 PDF 文件

安装 react-pdf 库：

npm install react-pdf

引入并使用 Document 和 Page 组件：

import { Document, Page } from 'react-pdf';

function PDFViewer() {
  return (
    <Document file="/path/to/document.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

使用 iframe 嵌入 PDF 预览

直接通过 iframe 嵌入 PDF 文件：

function PDFViewer() {
  return (
    <iframe 
      src="/path/to/document.pdf"
      width="100%"
      height="500px"
    />
  );
}

使用 Google Docs 查看器预览 PDF

通过 Google Docs 查看器服务嵌入 PDF：

function PDFViewer() {
  return (
    <iframe
      src={`https://docs.google.com/viewer?url=${encodeURIComponent('http://example.com/document.pdf')}&embedded=true`}
      width="100%"
      height="500px"
    />
  );
}

使用 PDF.js 实现高级预览

安装 pdfjs-dist：

npm install pdfjs-dist

实现自定义 PDF 渲染：

import * as pdfjsLib from 'pdfjs-dist';

async function renderPDF(url, canvasElement) {
  const pdf = await pdfjsLib.getDocument(url).promise;
  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 1.0 });

  canvasElement.width = viewport.width;
  canvasElement.height = viewport.height;

  await page.render({
    canvasContext: canvasElement.getContext('2d'),
    viewport: viewport
  }).promise;
}

处理大型 PDF 文件的分页加载

使用 react-pdf 实现分页控制：

import { useState } from 'react';
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="/path/to/document.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
      <button onClick={() => setPageNumber(prev => prev - 1)} disabled={pageNumber <= 1}>
        Previous
      </button>
      <button onClick={() => setPageNumber(prev => prev + 1)} disabled={pageNumber >= numPages}>
        Next
      </button>
    </div>
  );
}

自定义 PDF 查看器样式

为 PDF 查看器添加自定义样式：

react实现df预览

import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
import 'react-pdf/dist/esm/Page/TextLayer.css';

function StyledPDFViewer() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px' }}>
      <Document file="/path/to/document.pdf">
        <Page 
          pageNumber={1} 
          width={600}
          renderAnnotationLayer={false}
          renderTextLayer={false}
        />
      </Document>
    </div>
  );
}