本文详解如何在 Angular（v16+）中正确集成 pdfjs-dist，解决因 node_modules 路径未暴露导致的 404 错误，并提供从脚本注入到原生模块化开发的两种可靠实践路径。
本文详解如何在 angular（v16+）中正确集成 pdfjs-dist，解决因 `node_modules` 路径未暴露导致的 404 错误，并提供从脚本注入到原生模块化开发的两种可靠实践路径。
Angular 的开发服务器（ng serve）默认不提供对 node_modules 目录的 HTTP 访问权限，这与 VS Code 的 Open Live Server（直接托管整个文件夹）有本质区别。因此，你在纯 HTML/JS 环境下能通过 /node_modules/pdfjs-dist/build/pdf.min.mjs 成功加载，但在 Angular 中却报 ERR_ABORTED 404——根本原因在于：该路径在 Angular 构建上下文中并不存在，/node_modules/ 并非公开静态资源目录。
✅ 正确方案一：将 pdfjs-dist 显式声明为静态资产（推荐用于快速验证）
你需要在 angular.json 的 assets 配置中显式声明 pdfjs-dist 的物理路径映射，使其在构建后可被浏览器访问：
{
"projects": {
"your-app-name": {
"architect": {
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/pdfjs-dist/",
"output": "/node_modules/pdfjs-dist/"
}
]
}
}
}
}
}
}⚠️ 注意事项：
input是相对于项目根目录（含package.json）的绝对路径，必须以./node_modules/开头；output是构建后在dist/目录中生成的公开路径，/node_modules/pdfjs-dist/表示可通过http://localhost:4200/node_modules/pdfjs-dist/...访问；- 此配置仅影响构建产物和开发服务器，不会将整个 node_modules 打包进最终应用，体积可控；
- 修改后需重启
ng serve生效。
完成配置后，你原有的 app.js 即可继续使用（无需改动路径），因为 /node_modules/pdfjs-dist/build/pdf.min.mjs 此时已真实存在。
✅ 正确方案二：彻底拥抱 Angular 模块化（生产级推荐）
相比动态注入 <script></script>，更专业、可维护、类型安全的方式是直接在 TypeScript 中导入 pdfjs-dist，由 Angular CLI 自动处理打包与 worker 加载：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
1. 安装兼容版本（避免 ES2022+ 特性问题）
Angular v16 默认支持 ES2022，但若需兼容旧内核（如 360 极速浏览器 v13.5），建议锁定已验证兼容的版本：
npm uninstall pdfjs-dist npm install pdfjs-dist@2.12.313 --save
✅
2.12.313是社区广泛验证的稳定版，不含Array.prototype.at()等新语法，完美适配 Chrome 86 及更早内核。
2. 在组件中直接导入与使用
// pdf-rendering.component.ts
import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
@Component({
selector: 'app-pdf-rendering',
templateUrl: './pdf-rendering.component.html',
styleUrls: ['./pdf-rendering.component.css']
})
export class PdfRenderingComponent implements OnInit, AfterViewInit {
ngOnInit() {
// 初始化 PDF.js 全局配置（仅需一次）
pdfjsLib.GlobalWorkerOptions.workerSrc =
'/node_modules/pdfjs-dist/build/pdf.worker.min.mjs';
}
ngAfterViewInit() {
this.renderPDF('./assets/output.pdf'); // 建议将 PDF 放入 src/assets/
}
private async renderPDF(url: string): Promise<void> {
try {
const loadingTask = pdfjsLib.getDocument(url);
const pdf = await loadingTask.promise;
const container = document.getElementById('pdf-container');
if (!container) return;
container.innerHTML = '';
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d')!;
canvas.height = viewport.height;
canvas.width = viewport.width;
container.appendChild(canvas);
const renderContext = {
canvasContext: context,
viewport
};
await page.render(renderContext).promise;
}
} catch (err) {
console.error('PDF 渲染失败:', err);
}
}
}3. 补充关键配置（防止跨域与 worker 失败）
- 将你的 PDF 文件放入
src/assets/下（如src/assets/output.pdf），确保可通过/assets/output.pdf访问； - 若 PDF 来自后端接口，需确保服务端返回
Access-Control-Allow-Origin: *或指定域名； - 如仍遇 worker 加载失败，请确认
angular.json中assets已按方案一配置，且路径与workerSrc完全一致。
? 进阶提示：Worker 路径自动推导（可选优化）
为避免硬编码路径，可借助 Angular 的 APP_BASE_HREF 或环境变量动态拼接，但对大多数项目，显式声明 workerSrc 已足够清晰可靠。
✅ 总结
| 方案 | 适用场景 | 优势 | 注意点 |
|---|---|---|---|
| 静态资产声明 | 快速迁移旧 JS 逻辑、原型验证 | 零代码改造、见效快 | 需手动维护 angular.json，路径易出错 |
| 原生模块导入 | 新项目、长期维护、团队协作 | 类型安全、Tree-shaking、调试友好、符合 Angular 最佳实践 | 需适配版本，注意异步 API（v2.x 使用 await 替代 .then()） |
无论选择哪条路径，请始终牢记：Angular 不是文件服务器，所有前端可访问资源必须显式声明或导入。跳过这一步，任何依赖 node_modules 直接路径的方案都注定失败。
