PDF.js

什么是 PDF.js？

PDF.js 是由 Mozilla 开发的一个用于呈现 PDF 文件的 JavaScript 库。它允许开发者将 PDF 文件直接嵌入到网页中，而无需使用插件或其他外部工具。PDF.js 使用 HTML5 技术，利用 Canvas 元素来呈现 PDF 内容，并提供了一组 API，用于在网页中对 PDF 进行各种操作。

如何使用 PDF.js with React？

与普通的 JavaScript 项目类似，在 React 项目中使用 PDF.js 也非常简单。您可以将 PDF.js 作为依赖项添加到您的项目中，并编写相应的 React 组件来呈现 PDF 文件。以下是一个基本的示例：

import React, { useState, useEffect } from 'react';
import pdfjs from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/web/pdf_viewer.css';

const PdfViewer = ({ pdfUrl }) => {
    const [pdfDoc, setPdfDoc] = useState(null);

    useEffect(() => {
        const loadPdf = async () => {
            const pdf = await pdfjs.getDocument(pdfUrl).promise;
            setPdfDoc(pdf);
        };

        loadPdf();
    }, [pdfUrl]);

    return (
        <div>
            {pdfDoc && (
                <div>
                    {[...Array(pdfDoc.numPages)].map((_, index) => (
                        <PdfPage key={index} pageNum={index + 1} pdfDoc={pdfDoc} />
                    ))}
                </div>
            )}
        </div>
    );
};

const PdfPage = ({ pageNum, pdfDoc }) => {
    const canvasRef = React.createRef();

    useEffect(() => {
        const renderPage = async () => {
            const page = await pdfDoc.getPage(pageNum);
            const viewport = page.getViewport({ scale: 1 });
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            await page.render({
                canvasContext: context,
                viewport: viewport
            }).promise;
        };

        renderPage();
    }, [pageNum, pdfDoc]);

    return <canvas ref={canvasRef} />;
};

export default PdfViewer;

在这个示例中，我们创建了一个名为 PdfViewer 的 React 组件，它接受一个名为 pdfUrl 的 prop，该 prop 指定要加载的 PDF 文件的 URL。在 PdfViewer 组件内部，我们使用 useState 钩子来存储 PDF 文档，并使用 useEffect 钩子来异步加载 PDF 文件。一旦 PDF 文档加载完成，我们遍历文档的每一页，并为每一页创建一个 PdfPage 组件来呈现。

示例演示

在 React 应用中显示 PDF 文件

我们首先将展示如何在 React 应用中使用上述 PdfViewer 组件来显示一个简单的 PDF 文件。

import React from 'react';
import PdfViewer from './PdfViewer';

const App = () => {
    const pdfUrl = 'example.pdf';

    return (
        <div>
            <h1>PDF.js with React 示例</h1>
            <PdfViewer pdfUrl={pdfUrl} />
        </div>
    );
};

export default App;

其他功能

除了简单地显示 PDF 文件之外，您可以根据需求添加搜索、缩放、旋转、注释等功能。在 React 应用中，您可以轻松地将这些功能集成到 PdfViewer 组件中，并使其更加强大和灵活。