0

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

组件.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>

组件.ts

  pdfSrc = '../../assets/pdf/bla3.pdf';

  toggle() {
    this.isHideReceipt = !this.isHideReceipt;
  }

  download() {
    const blob = this.pdfSrc;
    saveAs(blob, 'test1.pdf');
  }

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

链接到官方 ng2-pdf-viewer 按钮下载重叠pdf

4

1 回答 1

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>
于 2019-09-17T17:44:58.690 回答