在 ng2-pdf-viewer Angular 上添加元素 <button>

Question

我需要使用ng2-pdf-viewer 在我的组件上显示PDF file，但其中一项要求是，我需要添加button download，并且它必须与PDF file 重叠，尝试查找有关此的任何参考，但没有找到，这是我尝试过的，

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

根据要求（按钮下载重叠的 pdf），我尝试使用 z-index 之类的 CSS，但没有用，有可能吗？

链接到official ng2-pdf-viewer

Answer 1

将按钮元素设置为具有绝对位置，并将其父容器设置为具有相对位置。这样你就可以重叠到 pdf 查看器上：

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