如何在Angular2/4应用中嵌入PDF并仅支持PDF捏合缩放？

嘿，我刚好在Angular 4项目里踩过类似的坑，给你分享几个亲测有效的解决方案：

方案一：使用ng2-pdf-viewer（推荐） #

这是基于pdf.js封装的Angular组件库，完美兼容Angular 2+，而且原生支持移动端捏合缩放，不用自己写额外的手势逻辑。

步骤： #

1. 安装依赖包：

npm install ng2-pdf-viewer --save

2. 在你的模块中导入组件：

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  imports: [
    // 其他模块
    PdfViewerModule
  ],
  declarations: [YourComponent],
})
export class YourModule { }

3. 在组件模板中使用：

<pdf-viewer 
  [src]="'assets/your-document.pdf'"  <!-- PDF文件路径 -->
  [enable-zoom]="true"                <!-- 开启缩放功能 -->
  [original-size]="false"             <!-- 允许调整尺寸 -->
  [zoom]="1"                          <!-- 默认缩放比例 -->
  style="width: 100%; height: 80vh;"
></pdf-viewer>

这个组件默认就支持手指捏合缩放，而且还提供了很多其他功能（比如分页、文本渲染），完全能覆盖大部分需求。

方案二：手动封装pdf.js + Hammer.js（定制化需求） #

如果你需要高度定制PDF的渲染逻辑，可以直接用pdf.js结合Hammer.js来实现手势缩放。之前觉得pdf.js不兼容Angular，其实是配置问题，只要正确引入就能正常使用。

步骤： #

1. 安装依赖：

npm install pdfjs-dist hammerjs --save

2. 组件中实现渲染和手势控制：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-custom-pdf-viewer',
  template: '<canvas #pdfCanvas style="width: 100%;"></canvas>'
})
export class CustomPdfViewerComponent implements OnInit {
  @ViewChild('pdfCanvas') pdfCanvas!: ElementRef<HTMLCanvasElement>;
  private pdfDoc: pdfjsLib.PDFDocumentProxy | null = null;
  private currentPage = 1;
  private zoomLevel = 1;

  ngOnInit(): void {
    // 配置pdf.js的worker路径（可以用CDN或本地文件）
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
    this.loadPdf('assets/your-document.pdf');
    this.setupGestureControls();
  }

  private async loadPdf(url: string): Promise<void> {
    this.pdfDoc = await pdfjsLib.getDocument(url).promise;
    this.renderCurrentPage();
  }

  private renderCurrentPage(): void {
    if (!this.pdfDoc) return;

    this.pdfDoc.getPage(this.currentPage).then(page => {
      const viewport = page.getViewport({ scale: this.zoomLevel });
      const canvas = this.pdfCanvas.nativeElement;
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      page.render(renderContext);
    });
  }

  private setupGestureControls(): void {
    const canvas = this.pdfCanvas.nativeElement;
    const hammer = new Hammer(canvas);
    hammer.get('pinch').set({ enable: true }); // 启用捏合手势

    let lastScale = 1;
    hammer.on('pinch', (event) => {
      // 计算缩放比例，限制在0.5到3倍之间
      this.zoomLevel = Math.max(0.5, Math.min(this.zoomLevel * (event.scale / lastScale), 3));
      lastScale = event.scale;
      this.renderCurrentPage();
    });

    // 捏合结束后重置lastScale
    hammer.on('pinchend', () => {
      lastScale = 1;
    });
  }
}

这个方案的灵活性更高，你可以根据需求添加更多手势（比如滑动翻页），但需要自己处理渲染和手势逻辑，适合有定制需求的场景。

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