PDF.js 在 Angular 项目中静态资源路径失效的完整解决方案-html教程-PHP中文网

PDF.js 在 Angular 项目中静态资源路径失效的完整解决方案

Angular 开发中直接复用原生 JS 的 pdfjs-dist 脚本常因 node_modules 不被 Webpack/Vite 构建服务托管而报 404 错误；本文详解如何通过 angular.json 配置静态资产、修正模块路径，并推荐更健壮的 Angular 原生集成方式。

angular 开发中直接复用原生 js 的 pdfjs-dist 脚本常因 node_modules 不被 webpack/vite 构建服务托管而报 404 错误；本文详解如何通过 angular.json 配置静态资产、修正模块路径，并推荐更健壮的 angular 原生集成方式。

在 Angular 项目中无法加载 pdfjs-dist，核心原因在于：Angular CLI 的开发服务器（基于 Webpack 或 Vite）默认不暴露 node_modules 目录下的文件为可访问的静态资源。而你在纯 HTML + Live Server 环境下能成功访问 /node_modules/pdfjs-dist/build/pdf.min.mjs，是因为 Live Server 直接将整个项目根目录作为静态文件根路径开放——这是一种宽松且非生产安全的开发行为，Angular 则严格遵循构建时资产声明机制。

✅ 正确配置：将 pdfjs-dist 显式声明为静态资产

你需要在 angular.json 的 projects..architect.build.options.assets 数组中，显式声明 pdfjs-dist 包为构建时需复制并对外提供服务的静态资源：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/pdfjs-dist/",
                "output": "/node_modules/pdfjs-dist/"
              }
            ]
          }
        }
      }
    }
  }
}

⚠️ 注意事项：

input 路径必须是相对于项目根目录（即 angular.json 所在位置）的相对路径；

output 中的 /node_modules/pdfjs-dist/ 表示该资源将在运行时可通过 http://localhost:4200/node_modules/pdfjs-dist/... 访问；

glob: "**/*" 确保所有子文件（包括 build/ 下的 .mjs、.js、.worker.min.js 及 cmaps/ 等）均被正确复制；

修改后需重启 ng serve 生效（热更新不触发 assets 重拷贝）。

完成上述配置后，你原始 JS 中的导入路径即可保持不变：

import * as pdfjsLib from '/node_modules/pdfjs-dist/build/pdf.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.min.mjs';

此时浏览器请求 http://localhost:4200/node_modules/pdfjs-dist/build/pdf.min.mjs 将返回 200，白屏与 ERR_ABORTED 404 问题彻底解决。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

? 不推荐的“捷径”及风险提示

❌ 不要将 pdfjs-dist 整个包手动拷贝到 src/assets/：虽可绕过配置，但会导致版本管理失控、无法享受 npm 自动更新、cmaps/worker 路径易出错，且破坏依赖清晰性；
❌ 避免在组件中动态 document.createElement('script') 加载 ES Module：type="module" 脚本无法跨域（即使同源）、无法共享作用域、调试困难，且 Angular 的变更检测与生命周期难以协同；
❌ 禁用 --disable-web-security 启动浏览器调试：这是本地开发的安全妥协，绝不可用于 CI/CD 或生产环境。

✅ 推荐方案：以 Angular 原生方式集成 pdfjs-dist（TypeScript + Service）

更符合 Angular 工程规范、类型安全、可测试、易维护的方式是：*将 PDF 渲染逻辑封装为可注入的服务，并在组件中使用 `import as pdfjsLib from 'pdfjs-dist'`（注意无路径前缀）**。

安装兼容版本（推荐 v3.4.120 或 v2.12.313）
鉴于你当前使用的是 ^4.4.168（已全面采用 ESM + at() 等现代语法），而 Angular 16 默认支持 ES2022，若目标浏览器较旧（如 IE11 或老版国产内核），请降级：
```
npm uninstall pdfjs-dist
npm install pdfjs-dist@3.4.120
```

创建 PDF 渲染服务（pdf-render.service.ts）

import { Injectable } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import type { PDFDocumentProxy, PageViewport, RenderTask } from 'pdfjs-dist';

@Injectable({
  providedIn: 'root'
})
export class PdfRenderService {
  constructor() {
    // 必须显式设置 worker 路径（Angular 构建后 worker 会自动复制到 /assets/）
    (pdfjsLib as any).GlobalWorkerOptions.workerSrc =
      '/assets/pdfjs-dist/build/pdf.worker.min.mjs';
  }

  async renderPdfToCanvas(
    url: string,
    container: HTMLElement,
    scale: number = 1.5
  ): Promise<void> {
    const loadingTask = pdfjsLib.getDocument(url);
    const pdf = await loadingTask.promise;

    container.innerHTML = '';
    for (let i = 1; i </void>

在组件中调用（pdf-rendering.component.ts）

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { PdfRenderService } from './pdf-render.service';

@Component({
  selector: 'app-pdf-rendering',
  templateUrl: './pdf-rendering.component.html',
  styleUrls: ['./pdf-rendering.component.css']
})
export class PdfRenderingComponent implements OnInit {
  @ViewChild('pdfContainer', { static: true }) pdfContainer!: ElementRef<htmldivelement>;

  constructor(private pdfService: PdfRenderService) {}

  ngOnInit() {
    // 示例：渲染本地 PDF（需确保 output.pdf 已放入 src/assets/）
    this.pdfService.renderPdfToCanvas('./assets/output.pdf', this.pdfContainer.nativeElement);
  }
}</htmldivelement>

补充：让 Angular 自动托管 pdfjs-dist 的 worker 文件
在 angular.json 的 assets 中追加一条，确保 worker 被复制到 /assets/（与上面 output 路径一致）：
```
{
  "glob": "build/pdf.worker.min.mjs",
  "input": "./node_modules/pdfjs-dist/",
  "output": "/assets/pdfjs-dist/build/"
}
```

? 总结

方式	是否推荐	关键要点
✅ `angular.json` 静态资产声明	★★★★☆	快速修复旧代码，适合过渡期；需精确配置 `input`/`output`；重启 dev server
✅ TypeScript Service 封装	★★★★★	类型安全、可单元测试、支持 DI、长期可维护；需处理 `workerSrc` 路径映射
❌ 动态 script 标签加载	★☆☆☆☆	违背 Angular 模块化原则，调试困难，易引发跨域/CSP 问题