这个问题我之前也碰到过！其实根源是pdf.js默认会自动尝试加载它的Worker脚本，但Angular CLI的打包机制不会自动把这个Worker文件放到可访问的正确路径，所以才会出现404，然后pdf.js fallback到了Fake Worker（虽然功能能用，但解析PDF的工作会跑到主线程，容易卡UI）。下面是两种可靠的解决办法，推荐第一种：

方法一：通过webpack导入指定Worker（推荐） #

这种方式利用pdfjs-dist提供的Webpack友好的Worker入口，让Angular CLI正确打包Worker文件：

1. 确保你已经安装了pdfjs-dist（你已经装了，这步可以跳过）：

npm install pdfjs-dist --save

2. 在你的组件/服务中，同时导入pdfjs库和它的Worker入口：

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

3. 在初始化代码里（比如ngOnInit）设置Worker路径：

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

这样Angular CLI会把Worker打包成单独的chunk，pdf.js就能正确找到它，不会再出现404和警告了。

给你一个完整的组件示例：

import { Component, OnInit } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

@Component({
  selector: 'app-pdf-handler',
  templateUrl: './pdf-handler.component.html',
  styleUrls: ['./pdf-handler.component.css']
})
export class PdfHandlerComponent implements OnInit {

  ngOnInit(): void {
    // 配置Worker
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

    // 正常加载PDF示例
    const pdfUrl = 'assets/your-document.pdf';
    const loadingTask = pdfjsLib.getDocument(pdfUrl);
    
    loadingTask.promise.then(pdf => {
      console.log(`PDF加载完成，共${pdf.numPages}页`);
      // 这里可以继续做分页渲染等操作
    }).catch(error => {
      console.error('PDF加载失败:', error);
    });
  }
}

方法二：手动复制Worker文件到Assets目录（备选） #

如果第一种方法不适用（比如旧版本Angular或pdfjs-dist），可以手动把Worker文件复制到Angular的assets目录：

1. 找到node_modules/pdfjs-dist/build/pdf.worker.js文件，复制到你的src/assets文件夹下。

2. 在代码里设置Worker路径为assets下的这个文件：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'assets/pdf.worker.js';

3. 确保angular.json的assets配置里包含这个文件（默认src/assets已经被包含，所以一般不用改）：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

这种方法虽然可行，但每次更新pdfjs-dist后都要重新复制文件，不如第一种方法省心。

关键说明 #

• Fake Worker是pdf.js的降级方案，它在主线程处理PDF解析，当处理大文件或多页PDF时，会导致页面卡顿，所以一定要配置真实的Worker。
• 第一种方法利用了Webpack的Worker打包机制，是Angular环境下的最佳实践，能自动处理依赖更新和打包路径问题。

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