如何为ngx-extended-pdf-viewer拦截下载事件并触发另存为对话框

核心思路 #

默认的(pdfDownloaded)事件是在下载完成后触发，无法拦截原生下载行为。要实现自定义“另存为”，需要禁用默认下载按钮/行为，手动获取PDF数据并触发浏览器的原生“另存为”对话框。

具体实现步骤 #

1. 隐藏默认下载按钮并添加自定义按钮
   在组件模板中，给PDF查看器添加属性隐藏默认下载按钮，同时自定义下载触发按钮：

   <ngx-extended-pdf-viewer
     [src]="yourPdfUrl"
     [showDownloadButton]="false"
     #pdfViewer
   ></ngx-extended-pdf-viewer>
   
   <!-- 自定义下载按钮 -->
   <button (click)="triggerCustomDownload()">下载PDF</button>
   

2. 获取PDF数据并触发“另存为”
   在组件类中，通过ViewChild获取PDF查看器实例，导出PDF为Blob后调用浏览器原生下载逻辑：

   import { Component, ViewChild } from '@angular/core';
   import { NgxExtendedPdfViewerComponent } from 'ngx-extended-pdf-viewer';
   
   @Component({
     // 组件元数据（如selector、templateUrl等）
   })
   export class YourComponent {
     @ViewChild('pdfViewer') pdfViewer!: NgxExtendedPdfViewerComponent;
     yourPdfUrl = '你的PDF文件路径或URL';
   
     async triggerCustomDownload() {
       try {
         // 获取PDF文档实例
         const pdfDoc = await this.pdfViewer.pdfDocument;
         // 将PDF导出为Blob对象
         const pdfBlob = await pdfDoc.saveDocument();
         // 触发浏览器“另存为”对话框
         this.initiateDownload(pdfBlob, '自定义文件名.pdf');
       } catch (error) {
         console.error('下载失败:', error);
       }
     }
   
     initiateDownload(blob: Blob, filename: string) {
       const downloadUrl = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = downloadUrl;
       link.download = filename;
       document.body.appendChild(link);
       link.click();
       // 清理临时URL
       window.URL.revokeObjectURL(downloadUrl);
       document.body.removeChild(link);
     }
   }
   

3. 可选：拦截原生下载事件（保留默认按钮）
   若不想隐藏默认下载按钮，可通过(download)事件拦截原生行为，再执行自定义逻辑：

   <ngx-extended-pdf-viewer
     [src]="yourPdfUrl"
     (download)="onDownload($event)"
     #pdfViewer
   ></ngx-extended-pdf-viewer>
   

   组件类中处理事件：

   async onDownload(event: Event) {
     // 阻止默认下载行为
     event.preventDefault();
     // 执行自定义下载逻辑
     await this.triggerCustomDownload();
   }
   

注意事项 #

• 确保已在Angular模块中正确导入NgxExtendedPdfViewerModule。
• 若PDF来自跨域地址，需确保服务器配置了正确的CORS响应头，避免获取Blob时出现权限错误。

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