Angular 4 集成 PDF.js 按钮失效问题求助

看起来你已经迈出了开发PDF查看器的关键第一步，我来帮你梳理现有配置，并补充一些后续开发的核心细节：

已完成的基础准备 #

• 从GitHub获取了PDF.js核心文件和pdf.worker.js，并放置到项目的assets目录中
• 当前index.html的代码片段如下：

<!doctype html> 
<html dir="ltr" mozdisallowselectionprint moznomarginboxes lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>PDFViewerApp</title> 
  <base href="/"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- 此处可补充你引入的其他样式/脚本 -->
</head>
<!-- body部分代码 -->

后续开发的关键配置要点 #

1. 手动指定PDF Worker加载路径 #

因为Angular的资源打包机制，PDF.js无法自动识别assets目录下的worker文件，需要在组件初始化时手动配置：

import * as pdfjsLib from 'pdfjs-dist';

// 在组件的ngOnInit钩子中设置
ngOnInit(): void {
  pdfjsLib.GlobalWorkerOptions.workerSrc = '/assets/pdf.worker.js';
}

2. 确保资源被正确打包 #

检查angular.json（Angular 4对应.angular-cli.json）中的assets配置，确保包含你的PDF.js文件所在目录，避免打包时资源丢失：

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

3. 基础PDF渲染示例 #

这里提供一个简单的组件内PDF渲染代码，帮你快速验证功能：

async renderFirstPage(): Promise<void> {
  // 替换为你的目标PDF文件路径
  const pdfUrl = '/assets/sample-document.pdf';
  
  try {
    // 获取PDF文档实例
    const pdfDocument = await pdfjsLib.getDocument(pdfUrl).promise;
    // 获取第一页内容
    const page = await pdfDocument.getPage(1);
    // 设置渲染缩放比例
    const viewport = page.getViewport({ scale: 1.2 });
    
    // 获取页面中的canvas元素
    const canvas = document.getElementById('pdf-render-canvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    
    // 匹配canvas尺寸与PDF页面视口
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    
    // 渲染PDF页面到canvas
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise;
  } catch (error) {
    console.error('PDF加载或渲染失败:', error);
  }
}

对应的模板中需要添加canvas元素：

<canvas id="pdf-render-canvas"></canvas>
<button (click)="renderFirstPage()">加载PDF第一页</button>

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