什么是 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 組件中，并使其更加強大和靈活。
