**React-PDF-JS 安装与配置完全指南**

React-PDF-JS 安装与配置完全指南

react-pdf-js A React component to wrap PDF.js 项目地址: https://gitcode.com/gh_mirrors/re/react-pdf-js

---

📚 项目基础介绍及编程语言

React-PDF-JS 是一个基于 React 的组件库，它封装了 PDF.js 库，允许开发者轻松地在React应用中渲染PDF文档。此项目由 Mike Cousins 开发并维护，采用 TypeScript 进行编码，保证了类型安全，并且兼容ES6标准，使得代码更加健壮易读。

🔧 关键技术和框架

• React: 用于构建用户界面的JavaScript库。
• PDF.js: Mozilla开发的一个纯JavaScript的PDF解析器，用于在浏览器端显示PDF文件。
• TypeScript: 强类型的JavaScript超集，提供编译时类型检查。
• Hooks API: React 16.8引入，用于更简洁地处理状态和生命周期管理。

🛠️ 安装与配置详细步骤

准备工作

确保你的开发环境已经配置好了以下工具：

• Node.js（推荐最新稳定版）
• npm 或者 yarn（包管理工具）

步骤一：创建React项目

如果你还没有一个React项目，首先通过create-react-app初始化一个新项目：

npx create-react-app my-pdfs-app
cd my-pdfs-app

步骤二：安装React-PDF-JS和依赖

接下来，我们需要安装 @mikecousins/react-pdf 和 PDF.js 的dist版本作为依赖：

# 使用yarn
yarn add @mikecousins/react-pdf pdfjs-dist

# 或者使用npm
npm install @mikecousins/react-pdf pdfjs-dist

步骤三：示例使用

在你的React组件中，你可以这样使用React-PDF-JS来展示PDF文档：

1. 首先，在你想要显示PDF的组件文件中，引入必要的模块：

import React, { useState, useRef } from 'react';
import { usePdf } from '@mikecousins/react-pdf';

2. 接下来，使用 usePdf 钩子来加载并展示PDF页面：

const MyPdfViewer = () => {
    const [page, setPage] = useState(1);
    const canvasRef = useRef(null);

    // 使用usePdf钩子加载PDF
    const [pdfDocument, pdfPage] = usePdf({
        file: 'path/to/your/pdf', // 替换为你的PDF文件路径或URL
        page,
        canvasRef,
    });

    return (
        <div>
            {pdfDocument ? 'Loading...' : null}
            <canvas ref={canvasRef} />
            {/* 显示分页导航，这里仅作为示例 */}
            {Boolean(pdfDocument && pdfDocument.numPages) && (
                <nav>
                    <ul className="pager">
                        <li className="previous">
                            <button disabled={page === 1} onClick={() => setPage(page - 1)}>
                                Previous
                            </button>
                        </li>
                        <li className="next">
                            <button disabled={page === pdfDocument.numPages} onClick={() => setPage(page + 1)}>
                                Next
                            </button>
                        </li>
                    </ul>
                </nav>
            )}
        </div>
    );
};

export default MyPdfViewer;

步骤四：配置PDF文件访问

确保你的PDF文件路径是正确的，如果是在线资源，则应提供完整的URL；如果是本地文件，确保web服务器能够正确服务该文件。

至此，您已成功配置并使用了React-PDF-JS，在您的React应用中展示了PDF文档。记得替换 'path/to/your/pdf' 为实际的PDF文件路径或URL，即可预览效果。

---

以上就是针对小白级别的React-PDF-JS安装与配置全流程，祝您开发顺利！

react-pdf-js A React component to wrap PDF.js 项目地址: https://gitcode.com/gh_mirrors/re/react-pdf-js