如何在Angular 2/4/5中使用PDF.js？求PDFViewer开发参考GitHub项目

嘿，我刚好在Angular 2/4/5项目里折腾过PDF.js做预览功能，给你整理一套可行的集成方案，还有几个靠谱的GitHub项目可以参考：

一、基础集成步骤 #

1. 安装依赖 #

首先得把PDF.js的npm包装到项目里，用npm或者yarn都可以：

npm install pdfjs-dist --save
# 或者用yarn
yarn add pdfjs-dist

2. 实现基础PDF预览组件 #

我们可以创建一个独立的PDF预览组件，复用性更强。比如新建pdf-viewer.component.ts：

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

// 必须指定Worker路径，否则PDF.js无法正常工作
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

@Component({
  selector: 'app-pdf-viewer',
  template: `
    <canvas #pdfCanvas></canvas>
  `,
  styles: [`
    canvas {
      width: 100%;
      height: auto;
      margin: 1rem 0;
    }
  `]
})
export class PdfViewerComponent implements OnInit {
  // 接收父组件传入的PDF文件地址
  @Input() pdfUrl: string;
  // 获取canvas元素的引用
  @ViewChild('pdfCanvas') pdfCanvas: ElementRef<HTMLCanvasElement>;

  ngOnInit(): void {
    this.loadAndRenderPdf();
  }

  private async loadAndRenderPdf(): Promise<void> {
    try {
      // 加载PDF文档
      const pdfDoc = await pdfjsLib.getDocument(this.pdfUrl).promise;
      // 获取第一页内容
      const page = await pdfDoc.getPage(1);
      // 设置预览视图的缩放比例（1.5倍比较适合网页显示）
      const viewport = page.getViewport({ scale: 1.5 });
      const canvas = this.pdfCanvas.nativeElement;
      const context = canvas.getContext('2d');

      // 匹配canvas尺寸和PDF页面尺寸
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 渲染PDF页面到canvas上
      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise;
    } catch (error) {
      console.error('PDF加载失败:', error);
    }
  }
}

然后在父组件的模板里直接使用这个组件就行：

<app-pdf-viewer [pdfUrl]="'/assets/your-document.pdf'"></app-pdf-viewer>

3. 扩展进阶功能（分页、缩放） #

如果需要更完整的PDF查看体验，比如分页切换、缩放调整，可以给组件加这些功能：
更新组件的模板：

<div class="pdf-controls">
  <button (click)="goToPreviousPage()" [disabled]="currentPage === 1">上一页</button>
  <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
  <button (click)="goToNextPage()" [disabled]="currentPage === totalPages">下一页</button>
  <label>缩放：{{ scale * 100 }}%</label>
  <input 
    type="range" 
    min="0.5" 
    max="2" 
    step="0.1" 
    [(ngModel)]="scale" 
    (input)="renderCurrentPage()"
  >
</div>
<canvas #pdfCanvas></canvas>

更新组件类的逻辑：

// 新增几个属性
currentPage = 1;
totalPages = 0;
scale = 1.5;
private pdfDoc: pdfjsLib.PDFDocumentProxy;

private async loadAndRenderPdf(): Promise<void> {
  try {
    this.pdfDoc = await pdfjsLib.getDocument(this.pdfUrl).promise;
    this.totalPages = this.pdfDoc.numPages;
    // 加载并渲染当前页
    await this.renderCurrentPage();
  } catch (error) {
    console.error('PDF加载失败:', error);
  }
}

private async renderCurrentPage(): Promise<void> {
  const page = await this.pdfDoc.getPage(this.currentPage);
  const viewport = page.getViewport({ scale: this.scale });
  const canvas = this.pdfCanvas.nativeElement;
  const context = canvas.getContext('2d');

  canvas.height = viewport.height;
  canvas.width = viewport.width;

  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise;
}

goToPreviousPage(): void {
  if (this.currentPage > 1) {
    this.currentPage--;
    this.renderCurrentPage();
  }
}

goToNextPage(): void {
  if (this.currentPage < this.totalPages) {
    this.currentPage++;
    this.renderCurrentPage();
  }
}

别忘了在组件的styles里加一点控制栏的样式：

.pdf-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
}
.page-info {
  font-weight: bold;
}

二、推荐的GitHub参考项目 #

这些都是基于Angular 2+和PDF.js开发的成熟项目，你可以参考它们的代码结构和功能实现：

• ngx-extended-pdf-viewer: 功能超级完整的PDF查看组件，支持分页、缩放、搜索、标注、打印等几乎所有实用功能，代码架构清晰，适合直接集成或者学习进阶用法。
• angular-pdf-viewer: 轻量级的基础PDF预览组件，代码简洁易懂，非常适合初学者理解Angular和PDF.js的基本交互逻辑。
• ng2-pdf-viewer: 曾经很流行的Angular 2+ PDF查看库，虽然现在维护频率不高，但核心逻辑很经典，能帮你搞懂底层的集成细节。

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