am using ng2-pdf-viewer to show pdf files in my app.
<pdf-viewer [src]="pdfSrc"
[page]="page"
[zoom]="1.1"
style="width: 100%;"
I want to add zoom in and zoom out buttons. How can i implement this in ng2-pdf-viewer.
Suggestion about any other better library that i can use with angular 4 for pdf files will be highly appreciated
I implemented custom zoom in and zoom out button by changing [zoom] property of ng2 pdf-viewer
html
<pdf-viewer [src]="pdfSrc"
[page]="page"
[original-size]="true"
[zoom]="zoom_to"></pdf-viewer>
and here is zoom methods in components class
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;
}
}
put a simple one thing. easily working. have fun!!!
//html part
<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 part, it will automatically change the size.
zoom: number = 1.0;
originalSize: boolean = true;
incrementZoom(amount: number) {
this.zoom += amount; }