在ng2-pdf-viewer Angular

Question

我需要使用PDF file在组件上显示ng2-pdf-viewer，但其中一项要求是，我需要添加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

将button元素设置为绝对位置，并将其父容器设置为相对位置。这样一来，您就可以与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>