Add element <button> on ng2-pdf-viewer Angular - html

Question

I need to display PDF file on my component using ng2-pdf-viewer, but one of its requirement,I need to add button downloadand it must overlapping PDF file, try to find any reference regarding this but none found, this is what I had tried,
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');
}
as per-requirement (button download overlapping pdf), Im trying using CSS like z-index but none work, it is possible ?
link to official ng2-pdf-viewer

Answer 1

Set the button element to have an absolute position and it's parent container to have a relative position. That way you'll be able to overlap onto the pdf viewer:
<button (click)="toggle()">VIEW RECEIPT</button>
<div style="position: relative; 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 style="position: absolute; right: 10px; bottom: 10px;" (click)="download()">Download PDF</button>
</div>