Angular13中如何通过ngx-extended-pdf-viewer手动下载编辑后的PDF

已安装ngx-extended-pdf-viewer@18和Angular13，组件运行正常，但通过独立按钮下载编辑后的PDF功能无法实现，以下是已编写的HTML和TS代码，寻求解决办法。

HTML代码 #

<ngx-extended-pdf-viewer #pdfViewer [src]="pdfSrc" [contextMenuAllowed]="false"
                         [enablePrint]="false"
                         [showSidebarButton]="false"
                         [showOpenFileButton]="false"
                         [showSecondaryToolbarButton]="false"
                         height="80vh"></ngx-extended-pdf-viewer>

<button (click)="downloadPdf()">Download it</button>

TypeScript代码 #

import {Component, ElementRef, OnInit, ViewChild, NgZone} from '@angular/core';
import SignaturePad from 'signature_pad';
import {PDFDocumentProxy} from 'ng2-pdf-viewer';
import {PDFDocument} from 'pdf-lib';
import {HttpClient} from "@angular/common/http";
import {IPDFViewerApplication, NgxExtendedPdfViewerComponent, PdfDownloadedEvent} from "ngx-extended-pdf-viewer";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  // pdf document
  pdfSrc = '../assets/download.pdf';
  pdfDoc?: PDFDocumentProxy;
  pdfDownloaded: any;
  @ViewChild('pdfViewer') pdfViewer!: NgxExtendedPdfViewerComponent;
  
constructor(private http: HttpClient, private ngZone: NgZone) {
  }
 
  ngOnInit(): void {
    console.log('dfsd');
  }


  downloadPdf() {
    // Get the PDF data from the PDF viewer
    // @ts-ignore
    const editedPdfData = this.pdfViewer?.getCurrentDocumentAsBlob();

    // Create a Blob URL for the edited PDF data
    const blob = new Blob([editedPdfData], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    // Create a download link
    const link = document.createElement('a');
    link.href = url;
    link.download = 'edited-file.pdf'; // Specify the desired filename

    // Append the link to the document, trigger the download, and then remove the link
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);

    // Revoke the Blob URL to free up memory
    URL.revokeObjectURL(url);
  }
}

解决方案 #

问题分析 #

你的代码核心问题在于：

1. getCurrentDocumentAsBlob()需要PDF完全加载且编辑内容同步后才能返回有效数据，直接调用可能因异步状态导致返回undefined；
2. 未处理PDF未加载完成的边界情况。

修正方案 #

方案一：直接使用组件内置下载方法

ngx-extended-pdf-viewer自带封装好的下载方法，可直接调用，自动处理编辑内容：

downloadPdf() {
  this.ngZone.run(() => {
    this.pdfViewer.download('edited-file.pdf');
  });
}

方案二：通过底层实例获取文档并下载

如果内置方法无效，可直接调用PDF.js的底层API：

downloadPdf() {
  const app = (window as any).PDFViewerApplication;
  if (app && app.documentLoaded) {
    app.downloadManager.download('edited-file.pdf');
  } else {
    console.error('PDF未加载完成');
  }
}

方案三：修复原方法的异步问题

如果坚持使用原逻辑，需先确保PDF加载完成，并处理异步获取Blob的过程：

async downloadPdf() {
  // 校验PDF加载状态
  if (!this.pdfViewer?.pdfViewerApplication?.documentLoaded) {
    console.error('PDF尚未加载完成');
    return;
  }
  
  try {
    const blob = await this.pdfViewer.getCurrentDocumentAsBlob();
    if (!blob) {
      console.error('无法获取编辑后的PDF数据');
      return;
    }
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'edited-file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
}

额外注意事项 #

• 确认编辑操作（如签名、注释）已完成同步，部分操作可能需要手动触发保存；
• 当前组件配置仅隐藏了默认按钮，底层下载API并未被禁用，无需额外开启权限。

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