angular-pdf-view
Version:
Angular 5+ component for rendering PDF
215 lines (185 loc) • 8.36 kB
HTML
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>ng2-pdf-viewer</span>
<span class="spacer"></span>
<iframe src="https://ghbtns.com/github-btn.html?user=vadimdez&repo=ng2-pdf-viewer&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</mat-toolbar-row>
</mat-toolbar>
<main>
<header>
<div class="page-content">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M21 13v-3l-6-7h-10.997c-1.106 0-2.003 0.898-2.003 2.007v22.985c0 1.109 0.891 2.007 1.997 2.007h15.005c1.103 0 1.997-0.898 1.997-1.991v-2.009h7.993c1.661 0 3.007-1.342 3.007-2.999v-7.002c0-1.656-1.336-2.999-3.007-2.999h-7.993zM20 26v2.007c0 0.548-0.448 0.993-1 0.993h-15c-0.545 0-1-0.446-1-0.995v-23.009c0-0.54 0.446-0.995 0.996-0.995h10.004v4.994c0 1.119 0.895 2.006 1.998 2.006h4.002v2h-7.993c-1.661 0-3.007 1.342-3.007 2.999v7.002c0 1.656 1.336 2.999 3.007 2.999h7.993zM15 4.5l4.7 5.5h-3.703c-0.546 0-0.997-0.452-0.997-1.009v-4.491zM11.995 14h17.011c1.092 0 1.995 0.892 1.995 1.992v7.016c0 1.092-0.893 1.992-1.995 1.992h-17.011c-1.092 0-1.995-0.892-1.995-1.992v-7.016c0-1.092 0.893-1.992 1.995-1.992zM25 19v-2h4v-1h-5v7h1v-3h3v-1h-3zM12 18v-2h2.995c1.111 0 2.005 0.895 2.005 2 0 1.112-0.898 2-2.005 2h-1.995v3h-1v-5zM13 17v2h2.001c0.552 0 0.999-0.444 0.999-1 0-0.552-0.443-1-0.999-1h-2.001zM18 16h2.995c1.111 0 2.005 0.898 2.005 2.006v2.988c0 1.119-0.898 2.006-2.005 2.006h-2.995v-7zM19 17v5h2.001c0.552 0 0.999-0.444 0.999-1v-3c0-0.552-0.443-1-0.999-1h-2.001z"></path>
</svg>
<h2>Angular 5+ PDF Viewer</h2>
<p>Angular 5+ Component to render PDF</p>
</div>
</header>
<div class="page-content">
<mat-form-field class="mb">
<input matInput
type="text"
placeholder="Set URL of the PDF file"
[(ngModel)]="pdfSrc"
>
</mat-form-field>
<div class="select-file__container">
<p>
Or render preview by just selecting PDF file (no upload required)
</p>
<input (change)="onFileSelected()" type="file" id="file">
</div>
<div *ngIf="error" class="error mb">
{{ error.message | json }}
</div>
<div class="mb">
<mat-slide-toggle [(ngModel)]="originalSize">
Original size
</mat-slide-toggle>
</div>
<div class="mb" [hidden]="!originalSize">
<mat-slide-toggle [(ngModel)]="fitToPage">
Fit to page
</mat-slide-toggle>
</div>
<div class="mb">
<mat-slide-toggle [(ngModel)]="renderText">
Render text layer
</mat-slide-toggle>
</div>
<div class="mb">
<mat-slide-toggle [(ngModel)]="autoresize">
Auto resize
</mat-slide-toggle>
</div>
<div class="mb">
<mat-slide-toggle [(ngModel)]="showAll">
Show all pages
</mat-slide-toggle>
</div>
<div class="mb">
<button (click)="incrementZoom(-0.1)" mat-button type="button">
-
</button>
<mat-form-field class="page-number">
<input matInput
type="number"
placeholder="Zoom"
[(ngModel)]="zoom"
pattern="-?[0-9]*(\.[0-9]+)?"
>
<mat-error>Input is not a number!</mat-error>
</mat-form-field>
<button (click)="incrementZoom(0.1)" mat-button type="button">
+
</button>
</div>
<div *ngIf="showAll" class="mb">
<mat-slide-toggle [(ngModel)]="stickToPage">
Stick to page
</mat-slide-toggle>
</div>
<div *ngIf="stickToPage && showAll || !showAll" class="mb">
<button (click)="incrementPage(-1)" mat-button type="button">
Previous
</button>
<mat-form-field class="page-number">
<input matInput
type="number"
placeholder="Page"
[(ngModel)]="page"
pattern="-?[0-9]*(\.[0-9]+)?"
>
<mat-error>Input is not a number!</mat-error>
</mat-form-field>
<span *ngIf="pdf">of {{ pdf.numPages }}</span>
<button (click)="incrementPage(1)" mat-button type="button">
Next
</button>
</div>
<div class="mb">
<button (click)="rotate(-90)" mat-button type="button">Rotate left</button>
<mat-form-field class="page-number">
<input matInput
type="number"
placeholder="Angle"
[ngModel]="rotation"
disabled
>
<mat-error>Input is not a number!</mat-error>
</mat-form-field>
<button (click)="rotate(90)" mat-button type="button">Rotate right</button>
</div>
<div *ngIf="showAll" class="mb">
<mat-slide-toggle [(ngModel)]="isOutlineShown">
Show outline
</mat-slide-toggle>
</div>
<div *ngIf="showAll && isOutlineShown">
<ul *ngFor="let item of outline" class="outline-list">
<li>
<a (click)="navigateTo(item.dest)">
{{ item.title }}
</a>
<ul *ngFor="let child of item.items">
<li>
<a (click)="navigateTo(child.dest)">
{{ child.title }}
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="mb">
<mat-form-field>
<input #queryInp
matInput
id="pdfQueryInput"
type="text"
placeholder="Search..."
[value]="pdfQuery"
(input)="searchQueryChanged($event.target.value)"
(keyup.enter)="searchQueryChanged(queryInp.value)"
>
<mat-hint>Search in entire pdf</mat-hint>
</mat-form-field>
</div>
<div *ngIf="!isLoaded && !error && progressData" id="progress">
<div class="bg">
<div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
</div>
<span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
</div>
<pdf-viewer [src]="pdfSrc"
[(page)]="page"
[rotation]="rotation"
[original-size]="originalSize"
[fit-to-page]="fitToPage"
(after-load-complete)="afterLoadComplete($event)"
[zoom]="zoom"
[show-all]="showAll"
[stick-to-page]="stickToPage"
[render-text]="renderText"
[external-link-target]="'blank'"
[autoresize]="autoresize"
(error)="onError($event)"
(on-progress)="onProgress($event)"
(page-rendered)="pageRendered($event)"
></pdf-viewer>
</div>
</main>
<footer>
<div class="name">ng2-pdf-viewer</div>
<ul class="link-list">
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=vadimdez&type=follow&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</li>
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=vadimdez&repo=ng2-pdf-viewer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe src="https://ghbtns.com/github-btn.html?user=vadimdez&repo=ng2-pdf-viewer&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
</li>
</ul>
</footer>