ng2-pdf-viewer

What is ng2-pdf-viewer?

ng2-pdf-viewer is an Angular component for viewing PDF files. It provides a simple way to display PDF documents in your Angular applications with various customization options.

What are ng2-pdf-viewer's main functionalities?

Basic PDF Viewing

This feature allows you to display a PDF file in your Angular application. The 'src' attribute specifies the path to the PDF file, and 'render-text' enables text rendering.

<pdf-viewer [src]="'path/to/pdf-file.pdf'" [render-text]="true"></pdf-viewer>

Pagination

This feature allows you to navigate through the pages of a PDF document. The 'page' attribute specifies the current page, and you can use buttons to change the page.

<pdf-viewer [src]="'path/to/pdf-file.pdf'" [page]="page"></pdf-viewer>
<button (click)="page = page - 1">Previous</button>
<button (click)="page = page + 1">Next</button>

Zoom

This feature allows you to zoom in and out of the PDF document. The 'zoom' attribute specifies the zoom level, and you can use buttons to adjust the zoom level.

<pdf-viewer [src]="'path/to/pdf-file.pdf'" [zoom]="zoom"></pdf-viewer>
<button (click)="zoom = zoom + 0.1">Zoom In</button>
<button (click)="zoom = zoom - 0.1">Zoom Out</button>

Rotation

This feature allows you to rotate the PDF document. The 'rotation' attribute specifies the rotation angle, and you can use a button to rotate the document by 90 degrees.

<pdf-viewer [src]="'path/to/pdf-file.pdf'" [rotation]="rotation"></pdf-viewer>
<button (click)="rotation = rotation + 90">Rotate</button>

Text Layer

This feature enables the text layer, which makes the text in the PDF selectable and searchable. The 'render-text' attribute is set to true to enable this feature.

<pdf-viewer [src]="'path/to/pdf-file.pdf'" [render-text]="true"></pdf-viewer>

Other packages similar to ng2-pdf-viewer

pdfjs-dist

pdfjs-dist is a library that provides a low-level API to render PDF documents using JavaScript. It is more flexible and powerful but requires more effort to integrate into an Angular application compared to ng2-pdf-viewer.

ngx-extended-pdf-viewer

ngx-extended-pdf-viewer is another Angular component for viewing PDF files. It offers more features and customization options than ng2-pdf-viewer, such as support for forms, annotations, and a built-in toolbar.

react-pdf

react-pdf is a React component for viewing PDF files. While it is not for Angular, it offers similar functionalities to ng2-pdf-viewer for React applications, including basic viewing, pagination, and zooming.

README

Angular2+ PDF Viewer

PDF Viewer Component for Angular 2+

Demo page

https://vadimdez.github.io/ng2-pdf-viewer/

Install

npm install ng2-pdf-viewer --save

Usage

In case you're using systemjs see configuration here.

Add PdfViewerComponent to your module's declarations

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { PdfViewerComponent } from 'ng2-pdf-viewer';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, PdfViewerComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then use it in your component

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
  <div>
      <label>PDF src</label>
      <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
  </div>
  <div>
      <label>Page:</label>
      <input type="number" placeholder="Page" [(ngModel)]="page">
  </div>
  <pdf-viewer [src]="pdfSrc" 
              [page]="page" 
              [original-size]="true" 
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc: string = '/pdf-test.pdf';
  page: number = 1;
}

Options

• src
• page
• render-text
• rotation
• zoom
• original-size
• show-all
• after-load-complete
• error
• on-progress

[src]

accepts: string, object, UInt8Array

Pass pdf location

[src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"

For more control you can pass options object to [src].

Options object for loading protected PDF would be

{
 url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',
 withCredentials: true
}

See more attributes here.

[page]

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

[render-text]

Enable text rendering, allows to select text

[render-text]="true"

[rotation]

Rotate PDF

Allowed step is 90 degree, ex. 0, 90, 180

[rotation]="90"

[zoom]

Zoom pdf

[zoom]="0.5"

[original-size]

if set to true - size will be as same as original document

if set to false - size will be as same as container block

[original-size]="true"

[show-all]

Show single or all pages altogether

[show-all]="true"

(after-load-complete)

Get PDF information with callback

First define callback function "callBackFn" in your controller,

callBackFn(pdf: PDFDocumentProxy) {
   // do anything with "pdf"
}

And then use it in your template:

(after-load-complete)="callBackFn($event)"

(error)

Error handling callback

Define callback in your component's class

onError(error: any) {
  // do anything
}

Then add it to pdf-component in component's template

(error)="onError($event)"

(on-progress)

Loading progress callback - provides progress information total and loaded bytes. Is called several times during pdf loading phase.

Define callback in your component's class

onProgress(progressData: PDFProgressData) {
  // do anything with progress data. For example progress indicator
}

Then add it to pdf-component in component's template

(on-progress)="onProgress($event)"

Contribute

Clone the project

npm start

and then open

http://localhost:8000/

License

MIT © Vadym Yatsyuk

Changelog

1.2.2

• [#94] - Add load progress callback