React项目中兼容react-pdf v6.2.2与pdf.js v3.6.172的方案咨询

方法1：隔离Worker实例（推荐） #

避免使用全局GlobalWorkerOptions，给直接调用pdf.js的部分手动创建独立Worker实例，让react-pdf继续使用它自己的全局Worker配置，两者互不干扰。

修改pdf.js的使用代码：

import * as pdfjsLib from 'pdfjs-dist';
import PdfWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 加载PDF时直接传入自定义Worker实例，不依赖全局设置
const loadingTask = pdfjsLib.getDocument({
  url: '你的PDF文件路径.pdf',
  worker: new PdfWorker()
});

loadingTask.promise.then(pdf => {
  // 处理PDF文档的逻辑，比如获取页数、渲染页面等
});

react-pdf的代码保持原有设置即可，无需改动。

方法2：统一依赖版本 #

如果可以对齐两个库依赖的pdf.js版本，就能共用同一个Worker，从根源避免冲突：

1. 查看react-pdf@6.2.2的package.json，找到它依赖的pdfjs-dist具体版本
2. 卸载当前项目的pdfjs-dist，安装与react-pdf一致的版本：

npm uninstall pdfjs-dist
npm install pdfjs-dist@对应版本号

3. 在项目入口文件（如index.js）中统一设置一次全局Worker：

import { pdfjs } from 'react-pdf';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

之后无论是直接使用pdf.js还是react-pdf，都会共用这个Worker实例，版本一致就不会出现兼容问题。

方法3：动态切换全局WorkerSrc（不推荐） #

此方法通过在使用不同库前切换全局workerSrc实现，但存在并发加载时的冲突风险，仅作为备选方案：

// 使用pdf.js前切换
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
// 执行pdf.js相关操作

// 使用react-pdf前切换
import { pdfjs } from 'react-pdf';
import reactPdfWorker from 'react-pdf/node_modules/pdfjs-dist/build/pdf.worker.entry';

pdfjs.GlobalWorkerOptions.workerSrc = reactPdfWorker;
// 执行react-pdf相关操作

内容的提问来源于stack exchange，提问作者MarcosCunhaLima