javascripttypescriptangular13pdf-viewerngx-extended-pdf-viewer

How can I download pdf manually from ngx-extended-pdf-viewer in angular 13


I have installed ngx-extended-pdf-viewer@18 and angular 13. It works well. But now I want to download edit pdf file with separate button, how can i achieve that. please help

in HTML file

<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>

in ts file

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);
  }
}

not only this i have done so many tries to solve it but i don't get it's solution.


Solution

  • This solution is only possible for versions equal to or greater than version 7

    Add import

    import { NgxExtendedPdfViewerService } from 'ngx-extended-pdf-viewer';

    change your code here:

    constructor( private http: HttpClient, private ngZone: NgZone, private ngxService: NgxExtendedPdfViewerService) { }

    and here:

    const editedPdfData = this.ngxService?.getCurrentDocumentAsBlob();