如何在React+TypeScript项目中正确使用PDF.js Worker？

方案一：直接指定CDN Worker地址（最简单） #

不需要本地导入worker，直接配置GlobalWorkerOptions.workerSrc指向CDN上的worker文件，版本要和你安装的pdfjs-dist版本完全一致：

import * as pdfjsLib from 'pdfjs-dist';
// 替换x.x.x为你安装的pdfjs-dist版本号
pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/x.x.x/pdf.worker.min.js`;

// 后续正常调用getDocument
async function loadPDF() {
  const pdf = await pdfjsLib.getDocument("helloworld.pdf").promise;
  // 处理PDF内容，比如获取第一页
  const page = await pdf.getPage(1);
  // ...
}

方案二：本地导入Worker（适配TypeScript） #

如果想使用本地的worker文件，按以下步骤处理：

1. 确保安装类型声明包（未安装的话执行）：

npm install @types/pdfjs-dist --save-dev

2. 配置本地worker路径，webpack会自动处理打包：

import * as pdfjsLib from 'pdfjs-dist';
// 直接指向node_modules内的worker文件
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).href;

async function loadPDF() {
  const pdf = await pdfjsLib.getDocument("helloworld.pdf").promise;
  // ...后续操作
}

若遇到worker文件类型报错，在项目根目录的.d.ts声明文件中补充：

declare module 'pdfjs-dist/build/pdf.worker.mjs' {
  import type { PDFWorker } from 'pdfjs-dist';
  export default PDFWorker;
}

方案三：使用React封装库（可选） #

如果不想手动配置worker，可使用现成的React封装库，已内置处理worker和TypeScript适配：

npm install react-pdf

使用示例：

import { Document, Page } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

function PDFViewer() {
  return (
    <Document file="helloworld.pdf">
      <Page pageNumber={1} />
    </Document>
  );
}

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