在 ng2-pdf-viewer 中放大和缩小答案

【问题标题】：zoom in and zoom out in ng2-pdf-viewer在 ng2-pdf-viewer 中放大和缩小
【发布时间】：2017-09-27 06:59:48
【问题描述】：

我正在使用 ng2-pdf-viewer 在我的应用中显示 pdf 文件。

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

我想添加放大和缩小按钮。我如何在 ng2-pdf-viewer 中实现这一点。

高度赞赏我可以将 angular 4 用于 pdf 文件的任何其他更好的库的建议

【问题讨论】：

标签： angular pdf

【解决方案1】：

我通过更改 ng2 pdf-viewer 的 [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;
    }
  }

【讨论】：

【解决方案2】：

放一个简单的一件事。轻松工作。玩得开心！！！

//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;   }

【讨论】：