react.js怎么在线预览pdf

React.js 在线预览 PDF 的方法有多个，包括使用第三方库、嵌入 PDF 查看器、利用浏览器内置功能等。常用的方法有：react-pdf、PDF.js、iframe 内嵌。以下将详细介绍其中一种方法——react-pdf。

使用 react-pdf 可以方便地在 React 应用中嵌入和预览 PDF 文件。接下来，我们将详细解释如何使用 react-pdf 实现 PDF 文件的在线预览。

一、安装和基本使用

安装 `react-pdf`

首先，你需要安装 react-pdf 包。使用 npm 或 yarn 进行安装：

npm install @react-pdf-viewer

或者

yarn add @react-pdf-viewer

导入并使用 `react-pdf`

安装完成后，可以在你的 React 应用中导入并使用 react-pdf。下面是一个简单的示例代码：

import React from 'react';
import { Document, Page } from 'react-pdf';
const MyApp = () => {
  return (
    <div>
      <Document
        file="path/to/your/pdf/file.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={1} />
      </Document>
    </div>
  );
};
const onDocumentLoadSuccess = ({ numPages }) => {
  console.log(`Document loaded with ${numPages} pages.`);
};
export default MyApp;

在上面的代码中，我们导入了 Document 和 Page 组件，并使用 Document 组件加载 PDF 文件。Page 组件用于显示 PDF 的特定页面。

二、处理多页 PDF

当需要处理多页 PDF 时，可以使用 map 函数遍历每一页，并使用 Page 组件显示每一页。

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
const MyApp = () => {
  const [numPages, setNumPages] = useState(null);
  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };
  return (
    <div>
      <Document
        file="path/to/your/pdf/file.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>
    </div>
  );
};
export default MyApp;

在这个示例中，我们使用 useState 钩子来存储 PDF 的页数，并在 Document 加载成功后设置页数。然后，我们使用 Array.from 创建一个数组，并通过 map 函数遍历每一页。

三、添加页面导航

为了增强用户体验，可以添加页面导航按钮，允许用户在不同页面之间切换。

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
const MyApp = () => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };
  const goToPrevPage = () => setPageNumber(pageNumber - 1);
  const goToNextPage = () => setPageNumber(pageNumber + 1);
  return (
    <div>
      <nav>
        <button onClick={goToPrevPage} disabled={pageNumber <= 1}>
          Previous
        </button>
        <button onClick={goToNextPage} disabled={pageNumber >= numPages}>
          Next
        </button>
      </nav>
      <Document
        file="path/to/your/pdf/file.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};
export default MyApp;

在这个示例中，我们添加了两个按钮用于导航，并在 Document 加载成功后显示当前页数和总页数。goToPrevPage 和 goToNextPage 函数用于更新 pageNumber 的状态，从而实现页面切换。

四、处理 PDF 文件加载错误

在实际应用中，可能会遇到 PDF 文件加载错误的情况。可以使用 onLoadError 和 onSourceError 属性处理这些错误。

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
const MyApp = () => {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [error, setError] = useState('');
  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };
  const onDocumentLoadError = (error) => {
    setError(`Failed to load PDF file: ${error.message}`);
  };
  return (
    <div>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <nav>
        <button onClick={goToPrevPage} disabled={pageNumber <= 1}>
          Previous
        </button>
        <button onClick={goToNextPage} disabled={pageNumber >= numPages}>
          Next
        </button>
      </nav>
      <Document
        file="path/to/your/pdf/file.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={onDocumentLoadError}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
};
export default MyApp;

在上面的代码中，我们增加了 onLoadError 回调函数，用于处理 PDF 文件加载错误，并显示错误信息。

五、PDF 文件来源

PDF 文件的来源可以是本地文件、远程 URL 或 Blob 对象。以下是几种不同的文件来源示例：

本地文件

<Document file="path/to/your/pdf/file.pdf" />

远程 URL

<Document file="https://example.com/your/pdf/file.pdf" />

Blob 对象

const blob = new Blob([yourPdfData], { type: 'application/pdf' });
<Document file={blob} />

六、PDF.js 的使用

除了 react-pdf，你还可以选择使用 PDF.js 直接在 React 中预览 PDF 文件。PDF.js 是 Mozilla 开发的一个开源项目，用于解析和渲染 PDF 文件。

安装 PDF.js

npm install pdfjs-dist

使用 PDF.js 进行预览

以下是一个使用 PDF.js 进行 PDF 文件预览的示例：

import React, { useEffect, useRef } from 'react';
import pdfjsLib from 'pdfjs-dist/build/pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const MyApp = () => {
  const canvasRef = useRef(null);
  useEffect(() => {
    const url = 'path/to/your/pdf/file.pdf';
    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.5 });
      const canvas = canvasRef.current;
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    };
    loadPdf();
  }, []);
  return <canvas ref={canvasRef}></canvas>;
};
export default MyApp;

在这个示例中，我们使用 useEffect 钩子在组件挂载后加载 PDF 文件，并使用 PDF.js 渲染 PDF 页面到 canvas 元素。

七、总结

本文介绍了在 React.js 中在线预览 PDF 文件的多种方法，包括使用 react-pdf、PDF.js 等。每种方法都有其优缺点，具体选择哪种方法取决于你的需求。希望本文对你有所帮助！

如果你需要管理项目团队，可以选择 研发项目管理系统PingCode 和 通用项目协作软件Worktile，它们提供了强大的功能和灵活的协作工具，可以帮助你更高效地管理项目。