基于object标签嵌入PDF，如何捕获浏览器查看器的下载事件？

用<object>嵌入的PDF，其内置阅读器（比如Chrome的PDFium、Firefox的PDF阅读器）的DOM属于独立浏览上下文，外部脚本无法访问或监听内部按钮的点击事件，没法直接捕获原生下载按钮的触发动作。下面给你几个可行的替代方案：

方案一：隐藏原生工具栏，自定义下载按钮（最简单） #

直接屏蔽内置阅读器的工具栏，自己在页面添加下载按钮，完全控制下载触发时的额外操作。

步骤1：修改PDF加载代码，隐藏原生工具栏 #

生成pdfData时，给Data URL拼接浏览器PDF阅读器的参数（以Chrome为例，#toolbar=0会隐藏工具栏）：

this.service.getDataPdf().subscribe(res => {
  const fileReader = new FileReader();
  fileReader.readAsDataUrl(res);
  fileReader.onloadend(() => {
    // 拼接参数隐藏原生工具栏
    const pdfUrlWithParams = fileReader.result + '#toolbar=0';
    this.pdfData = this.domSanitize.bypassSecurityTrustResourceUrl(pdfUrlWithParams);
  });
});

注意：不同浏览器的参数支持有差异，比如Firefox对部分参数支持有限，若要兼容多浏览器，建议结合方案二。

步骤2：添加自定义下载按钮并绑定事件 #

模板中添加按钮，点击时先执行额外操作再触发下载：

<object [data]="pdfData" type="application/pdf" width="100%" height="500px"></object>
<button (click)="handlePdfDownload()">下载PDF</button>

组件中实现处理函数：

// 建议缓存从服务器获取的PDF二进制数据，避免重复请求
private pdfBlob: Blob | null = null;

this.service.getDataPdf().subscribe(res => {
  this.pdfBlob = new Blob([res], { type: 'application/pdf' });
  // 原有的pdfData生成逻辑...
});

handlePdfDownload() {
  if (!this.pdfBlob) return;
  
  // 执行你需要的额外操作，比如上报统计、记录日志
  console.log('用户触发了PDF下载操作');

  // 触发PDF下载
  const downloadUrl = window.URL.createObjectURL(this.pdfBlob);
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = '文件名.pdf';
  a.click();
  window.URL.revokeObjectURL(downloadUrl);
}

方案二：使用PDF.js完全自定义PDF渲染（最灵活） #

用Mozilla开源的PDF.js库替代浏览器内置阅读器，完全控制PDF的渲染和UI，所有交互事件都能自主处理。

步骤1：安装依赖 #

npm install pdfjs-dist

步骤2：组件中实现PDF加载和自定义下载 #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import { YourPdfService } from './your-pdf.service';

// 配置PDF.js的worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

@Component({
  template: `
    <div #pdfContainer></div>
    <button (click)="handleDownload()">下载PDF</button>
  `
})
export class PdfViewerComponent implements OnInit {
  @ViewChild('pdfContainer') pdfContainer!: ElementRef;
  private pdfBlob: Blob | null = null;

  constructor(private pdfService: YourPdfService) {}

  ngOnInit() {
    this.loadPdf();
  }

  async loadPdf() {
    // 从服务器获取PDF二进制数据并缓存
    const res = await this.pdfService.getDataPdf().toPromise();
    this.pdfBlob = new Blob([res], { type: 'application/pdf' });
    
    // 用PDF.js渲染PDF第一页（如需多页可循环渲染）
    const pdfDoc = await pdfjsLib.getDocument({ data: await this.pdfBlob.arrayBuffer() }).promise;
    const page = await pdfDoc.getPage(1);
    const viewport = page.getViewport({ scale: 1.5 });
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    this.pdfContainer.nativeElement.appendChild(canvas);
    
    await page.render({ canvasContext: ctx, viewport }).promise;
  }

  handleDownload() {
    if (!this.pdfBlob) return;
    
    // 执行额外操作
    console.log('用户发起PDF下载');
    
    // 触发下载
    const downloadUrl = window.URL.createObjectURL(this.pdfBlob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = '自定义文件名.pdf';
    a.click();
    window.URL.revokeObjectURL(downloadUrl);
  }
}

方案三：全局监听浏览器下载事件（不推荐） #

通过监听浏览器全局download事件间接判断，但精度低，无法区分是当前PDF还是其他文件的下载，仅适合页面只有这一个下载操作的场景：

ngOnInit() {
  window.addEventListener('download', (event) => {
    // 执行额外操作
    console.log('有文件开始下载，大概率是目标PDF');
  });
}

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