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.
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();