使用ng2-pdf-viewer在我的应用程序中显示pdf文件时，放大并缩小在ng2-pdf-viewer

  • Z时代
  • 2024-01-10
  • 分类：问答

上。使用ng2-pdf-viewer在我的应用程序中显示pdf文件时，放大并缩小在ng2-pdf-viewer

<pdf-viewer [src]="pdfSrc" 
      [page]="page" 
      [zoom]="1.1" 
      style="width: 100%;"

我想在添加放大和缩小的按钮。我如何在ng2-pdf-viewer中实现这个功能。

建议任何其他更好的库，我可以具有角4使用的pdf文件，将不胜感激

回答：

予实现的自定义放大和通过改变NG2 PDF的观看者的[zoom]属性缩小按钮

HTML

<pdf-viewer [src]="pdfSrc" 
       [page]="page" 
       [original-size]="true" 
       [zoom]="zoom_to"></pdf-viewer>

，这里是在组件级缩放方法

zoom_in() { 
    this.zoom_to = this.zoom_to + 0.25; 
    } 
    zoom_out() { 
    if (this.zoom_to > 1) { 
     this.zoom_to = this.zoom_to - 0.25; 
    } 
    }

回答：

把一件简单的事情。轻松工作。玩的开心！！！

// HTML部分

<pdf-viewer [fit-to-page]="fitToPage" [(page)]="pageVariable" [zoom]="zoom" [autoresize]="autoresize" [show-all]="showAll" [src]="pdfSrc" [render-text]="true" style="display: block"></pdf-viewer> 
    <button ion-button (click)="incrementZoom(-0.1)"> 
     <img src="assets/Zoom_Out.png"/> 
    </button> 
    <button ion-button (click)="incrementZoom(0.1)"> 
     <img src="assets/Zoom_in.png"/> 
    </button>

// TS的一部分，它会自动改变大小。

zoom: number = 1.0; 
originalSize: boolean = true; 
incrementZoom(amount: number) { 
    this.zoom += amount; }

以上是 使用ng2-pdf-viewer在我的应用程序中显示pdf文件时，放大并缩小在ng2-pdf-viewer 的全部内容， 来源链接： utcz.com/qa/265305.html

回到顶部