Skip to content

Instantly share code, notes, and snippets.

@tabirkeland
Created April 20, 2018 01:31
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tabirkeland/426e1ba59ede87843830677b4fda388e to your computer and use it in GitHub Desktop.
Save tabirkeland/426e1ba59ede87843830677b4fda388e to your computer and use it in GitHub Desktop.
ng2-pdf-viewer zoom implementation
<ion-header>
<ion-navbar>
<ion-title>{{ title }}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content fullscreen>
<div *ngIf="pdfSrc">
<pdf-viewer [src]="pdfSrc" [zoom]="pdfZoom" [fit-to-page]="true" [render-text]="true"></pdf-viewer>
<ion-fab bottom right>
<button ion-fab mini (click)="zoomIn()">
<ion-icon name="add"></ion-icon>
</button>
<button ion-fab mini (click)="zoomOut()">
<ion-icon name="remove"></ion-icon>
</button>
<button ion-fab mini (click)="resetZoom()">
<ion-icon name="refresh"></ion-icon>
</button>
</ion-fab>
</div>
<video width="100%" controls *ngIf="videoSrc">
<source [src]="videoSrc">
</video>
</ion-content>
page-documentation-modal {
pdf-viewer {
display:inline-block;
max-width:100%;
}
ion-fab {
position:fixed;
}
video {
max-width: 100%;
max-height: 100%;
}
}
import { Component } from '@angular/core';
import { NavParams, ViewController } from 'ionic-angular';
const ZOOM_STEP:number = 0.25;
const DEFAULT_ZOOM:number = 1;
@Component({
selector: 'page-documentation-modal',
templateUrl: 'documentation-modal.html',
})
export class DocumentationModalPage
{
public pdfSrc:string = '';
public videoSrc:string = '';
public title:string = '';
public pdfZoom:number = DEFAULT_ZOOM;
public constructor(navParams: NavParams, private viewCtrl: ViewController)
{
const doc = navParams.get('document');
const video = navParams.get('video');
if (doc) {
this.pdfSrc = doc.source_dir;
this.title = doc.name;
} else if (video) {
this.videoSrc = video.source_dir;
this.title = video.name;
} else {
}
}
public zoomIn()
{
this.pdfZoom += ZOOM_STEP;
}
public zoomOut()
{
if (this.pdfZoom > DEFAULT_ZOOM) {
this.pdfZoom -= ZOOM_STEP;
}
}
public resetZoom()
{
this.pdfZoom = DEFAULT_ZOOM;
}
public dismiss()
{
this.viewCtrl.dismiss();
}
}
@antynaty
Copy link

amazing pdf viewer! congrats

@jgv66
Copy link

jgv66 commented Feb 5, 2020

muchas gracias. quedó perfecto !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment