React-PDF 项目下载及安装教程

1. 项目介绍

React-PDF 是一个用于在 React 应用中轻松显示 PDF 文件的开源库。它允许开发者将 PDF 文件嵌入到 React 组件中，就像嵌入图片一样简单。React-PDF 支持现代浏览器，并且提供了丰富的功能，如页面渲染、文本层支持、注释层支持等。

2. 项目下载位置

你可以通过以下链接访问 React-PDF 的 GitHub 仓库，并下载项目：

React-PDF GitHub 仓库

3. 项目安装环境配置

在安装 React-PDF 之前，请确保你的开发环境满足以下要求：

• Node.js：确保你已经安装了 Node.js（建议版本 14.x 或更高）。
• npm 或 yarn：React-PDF 可以通过 npm 或 yarn 进行安装。

环境配置示例

以下是检查 Node.js 和 npm 版本的命令：

node -v
npm -v

4. 项目安装方式

你可以通过 npm 或 yarn 来安装 React-PDF。以下是具体的安装步骤：

使用 npm 安装

npm install react-pdf

使用 yarn 安装

yarn add react-pdf

5. 项目处理脚本

在安装完成后，你需要配置 PDF.js 的 worker。以下是几种常见的配置方式：

1. 导入 worker（推荐）

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url
).toString();

2. 复制 worker 到 public 目录

你可以手动将 pdf.worker.mjs 文件从 pdfjs-dist/build 目录复制到你的项目输出目录。例如：

import path from 'node:path';
import fs from 'node:fs';

const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs');

fs.cpSync(pdfWorkerPath, './dist/pdf.worker.mjs', { recursive: true });

3. 使用外部 CDN

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

总结

通过以上步骤，你可以成功下载并安装 React-PDF 项目。确保你的开发环境配置正确，并根据需要配置 PDF.js worker。React-PDF 提供了简单易用的 API，帮助你在 React 应用中轻松显示 PDF 文件。