How to use

How to Use

(see this project page for more detailed example)

Install

npm install simple-pdf-viewer --save

Add SimplePdfViewerModule to your module's imports

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { SimplePdfViewerModule } from 'simple-pdf-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    SimplePdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component HTML

<section id="viewer">
    <!-- Simple PDF Viewer: open the test.pdf at the second page -->
    <simple-pdf-viewer #pdfViewer [src]="'test.pdf#page=2'"></simple-pdf-viewer>
</section>

<!-- Example actions -->
<button (click)="pdfViewer.zoomIn()">Zoom In</button>
<button (click)="pdfViewer.nextPage()">Next Page</button>
<button (click)="pdfViewer.turnLeft()">Turn the document left</button>
<button (click)="pdfViewer.search('PDF')">Search the world 'PDF'</button>

<!-- Information -->
<p>Number of pages: {{ pdfViewer.getNumberOfPages() }}</p>
<p>Actual page: {{ pdfViewer.getCurrentPage() }}</p>
<p>Zoom: {{ pdfViewer.getZoomPercent() }} %</p>
<p>Meta: 
    <ul *ngFor="let info of pdfViewer.getDocumentInformation()">
        <li>{{info.key}}: {{info.value}}</li>
    </ul>
</p>

Component TS

@Component({...})
export class AppComponent {

  @ViewChild(SimplePdfViewerComponent) private pdfViewer: SimplePdfViewerComponent;
  bookmarks: SimplePDFBookmark[] = [];

  // how to open PDF document
  openDocument(document: File) {
    const fileReader: FileReader = new FileReader();
    fileReader.onload = () => {
      this.pdfViewer.openDocument(new Uint8Array(fileReader.result));
    };
    fileReader.readAsArrayBuffer(document);
  }

  // how to create bookmark
  createBookmark() {
    this.pdfViewer.createBookmark().then(bookmark => {
      if(bookmark) {
        this.bookmarks.push(bookmark);
      }
    })
  }
}