基于React的两种方式使用React-pdf

官网提供两种方式使用，但是直接使用可能存在问题，下面是官网提供的：

第一种方式：这段脚本是将node_modules/pdfjs-dist/build文件夹下的pdf.worker.mjs拷贝到项目的项目的输出文件夹

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 });


第二种方式：这里需要在使用react-pdf的组件中引入
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc=`//unpkg.com/pdfjsdist@${pdfjs.version}/build/pdf.worker.min.mjs`;

首先存在的问题：

1. 使用的pnpm的话，需要额外创建配置一个.npmrc文件，复制ist-pattern[]=pdfjs-dist进去。因为pnpm 的包管理方式与 npm/yarn 不同。它使用一种类似符号链接的机制，按默认方式将依赖安装在嵌套的 node_modules 目录结构中，以节省磁盘空间和加速安装。然而，某些包（比如 pdfjs-dist）在项目中可能要求依赖位于顶层的 node_modules。否则，它们会因为路径问题找不到依赖，从而导致运行时错误。

2. 使用脚本拷贝的时候可能会出现报错，主要是因为package.json 文件中指定使用的 "type"类型。如果是"module"，这意味着默认情况下所有 .js 文件都被当作 ES 模块 处理，而 require 是 CommonJS 的语法，不能直接用于 ES 模块。如果没有定义type类型，会自动根据脚本的代码判断使用哪种语法。而官网提供的既有import也有require。将脚本文件定义.js .cjs .mjs都会报错。解决办法；脚本文件类型定义为copyPdfWorker.cjs

   import path from 'node:path';
   import fs from 'node:fs';
   
   替换为：使用的是CommonJS语法
   const path = require('node:path');
   const fs = require('node:fs');
   
   还需要注意拷贝的文件夹dist是否存在，可以将文件拷贝在public下

   在 package.json 中添加一个脚本，运行这个拷贝文件的逻辑

   {
     "scripts": {
       "copy-pdf-worker": "node scripts/copyPdfWorker.cjs"
     }
   }

   运行脚本：pnpm run copy-pdf-worker

3. 第二个问题是使用脚本拷贝，更简单的方式直接手动复制文件就行

4. 拷贝之后组件中引入的问题，第一种方式也需要这一步

   import { pdfjs } from 'react-pdf';
   
   // 设置 Worker 路径为公共目录中的路径就是public下
   pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';

5. 第二种方式直接使用可能会报错，如果你的项目在 HTTPS 下运行，确保 workerSrc 的路径也使用 HTTPS，否则会报错。

方法 1: 将 pdf.worker.mjs 文件拷贝到公共目录

你需要手动将 pdf.worker.mjs 文件从 pdfjs-dist 包中复制到你的项目的输出目录（如 dist 文件夹）。解决方案在上面已经提供。

方法 2: 使用外部 CDN，不要操作 pdf.worker.mjs，直接在组件中引入下面代码

如果你不想将 pdf.worker.mjs 文件复制到公共目录，可以直接使用公共 CDN（比如 unpkg 或 cdnjs）提供的文件。

import { pdfjs } from 'react-pdf';

// 使用 unpkg CDN 提供的 Worker 文件
pdfjs.GlobalWorkerOptions.workerSrc =`//unpkg.com/pdfjsdist@${pdfjs.version}/build/pdf.worker.min.mjs`;


 如果你的项目在 HTTPS 下运行，确保 workerSrc 的路径也使用 HTTPS，否则会报错。
pdfjs.GlobalWorkerOptions.workerSrc =`https://unpkg.com/pdfjsdist@${pdfjs.version}/build/pdf.worker.min.mjs`;

对比两种方法:

方法	优点	缺点
拷贝到公共目录	本地文件加载更快，不依赖网络；更加稳定。	需要额外的脚本管理文件复制。
使用外部 CDN	无需额外操作，快速实现。	依赖外部网络，若 CDN 不可用或慢，可能会出问题。