I am looking to showcase a PDF file on my component using ng2-pdf-viewer. One of the requirements is to include a download button that overlaps the PDF file. I have searched for references on how to achieve this but unfortunately, I haven't found any solution. Here is what I have attempted so far:
component.html
<button (click)="toggle()">VIEW RECEIPT</button>
<div style="height:715px">
<pdf-viewer *ngIf="isHideReceipt" [autoresize]="true" [src]="pdfSrc" [original-size]="false"
[render-text]='false' [show-all]="false" style="display: block;position: relative"
[fit-to-page]="true">
</pdf-viewer>
<button (click)="download()">Download PDF</button>
</div>
component.ts
pdfSrc = '../../assets/pdf/bla3.pdf';
toggle() {
this.isHideReceipt = !this.isHideReceipt;
}
download() {
const blob = this.pdfSrc;
saveAs(blob, 'test1.pdf');
}
For the specific requirement of having the download button overlap the pdf, I have attempted to use CSS properties like z-index without success. Is there a way to achieve this?
Link to official ng2-pdf-viewer https://i.sstatic.net/ZddjC.jpg