ng2-pdfjs-viewer

Angular 8 PDFJS viewer with Mozilla's ViewerJS (Supports Angular 2/4/5/6/7/8)

This is a super simple angular 8 component for displaying pdfs inline(embedded) OR in a new tab along with a feature rich viewer. It uses mozilla's pdfjs viewer(v2.2.171) behind the scenes and supports angular(2/4/5/6/7). Extremely lightweight, easiest to integrate and use, most reliable, this library has only one dependancy (@angular/core). Thanks a ton to the community, standing tall around 250,000 downloads!!!

Features

Some of below features are unique to this component, which is unavailable in native viewer or other implementations.
✔️ Open pdf in new window 🌐 - Opens pdf viewer in new window. Alos, you may set all allowable external window options.
✔️ Embed pdf 🗎 - Embeds viewer and pdf inside your web page/component.
✔️ Blob and byte arrays 🔟 - Have pdf as a byte array? Still works.
✔️ Print preview 🖨️ - You can set the pdf to open in a new tab or another browser window and provide an immediate print preview, A use case will be a 'Print' button opening pdf in new window with print dialog.
✔️ Auto download 💾 - This option allows you to download the pdf file to user device automatically without manually invoking the download.
✔️ Auto rotate 🔄 - Rotate the document clockwise or anti-clockwise 90° (+/- 90°) just before displaying. Useful if the document is misaligned.
✔️ Language 🌍 - Set the language of your choice to the viewer controls.
✔️ Custom error ❌ - Hate the defaults pdfjs errors, use this feature to override or append to it.
✔️ Side bar 📎 - Open and show the sidebar with relevant information. E.g. Show attachments.
✔️ Smart device friendly zoom 📱 - A better zooming experience on small devices.
✔️ Progress spinner ⏳ - An optional spinner which displays before document renders.
✔️ Show/Hide controls 👻 - Do not want users to see specific controls (E.g. download button). Use relevant features to remove controls from viewer.
✔️ Navigate ⏩ - Navigate the document using page number, section, or even directly jump to last page if you are expecting a signature from user.
✔️ Zoom 🔍 - Several zoom methods, auto, percentage (E.g. 150%), page-with/height, fit page etc. with ability to set offset.
✔️ Cursor 👆 - Love the age old hand cursor 👆 on your pdf? You got it.
✔️ Change file name - You may set the file name of download to a different one, if user chooses to download.
✔️ Scroll 📜 - Changes the scroll to your choice. Even wrapped scrolling is supported.
✔️ Spread - Allows you to change spread to odd or even.

Open in a new tab/ external window

Embed pdf into any angular component/page

Installation

Step 1: Install ng2-pdfjs-viewer

$ npm install ng2-pdfjs-viewer --save

And then configure it in your Angular AppModule:

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

import { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; // <-- Import PdfJsViewerModule module

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    PdfJsViewerModule // <-- Add to declarations
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Copy task for pdfjs

For several advanced options to work, you need a copy of pdfjs from this npm package. Edit your project's angular.json file and use ng build as described here https://angular.io/guide/workspace-config#project-asset-configuration

"assets": [
  { "glob": "**/*", "input": "node_modules/ng2-pdfjs-viewer/pdfjs", "output": "/assets/pdfjs" },
]

Please note, you may manually Copy node_modules\ng2-pdfjs-viewer\pdfjs to your public or asset folder or use any copy script as part of your build process. Another method could be to use TransferWebpackPlugin if you are using webpack(https://github.com/dkokorev90/transfer-webpack-plugin).
TransferWebpackPlugin Sample code

var TransferWebpackPlugin = require('transfer-webpack-plugin');
...
plugins: [
  new TransferWebpackPlugin([
    { from: 'node_modules\ng2-pdfjs-viewer\pdfjs', to: path.join(__dirname, 'assets') }
  ])
]

Please note if you decide to put pdfjs folder anywhere else other than the assets folder, make sure you also set [viewerFolder] property to help locate the folder.

Options

Attribute	Description	Type	Default Value
[pdfSrc]	Fully qualified path to pdf file. (For remote pdf urls over http/https, CORS should be enabled)	string
[viewerFolder]	Set path to pdfjs's web and build folders.	string	assets folder path
[externalWindow]	Open in new tab. Set to true to open document in a new tab	boolean	false
externalWindowOptions	External window options. For allowed comma separated values, refer to https://developer.mozilla.org/en-US/docs/Web/API/Window/open	string
downloadFileName	Sets/Changes the name of document to be downloaded. If the file name does not ends in .pdf, the component will automatically add it for you.	string	Actual name of the document
[page]	Show specific page. E.g page=3	number	1
[lastPage]	Show last page of the document once it is loaded(If set to true). If you use this option along with page option, undesired effects might occur	boolean	false
nameddest	Go to a named destination. E.g. To go to section 5.1 use like nameddest=5.1. Do not mix this option with page and lastPage options	string
zoom	Set zoom level of document. Applicable values are auto, page-width, page-height, page-fit, 200(As a zoom percentage), left offset(As in "auto,18,827"), top offset(As in "auto,18,127")	string	auto
[print]	Show/hide print button. Set false to hide	boolean	true
[startPrint]	Start print preview of document. This combined with externalWindow could mimic a print preview functionality just like the one in gmail.	boolean
[download]	Show/hide download button. Set false to hide	boolean	true
[find]	Show/hide search button. Set false to hide	boolean	true
[startDownload]	Download document as soon as it opens. You may put this to good use.	boolean
[rotatecw]	Rotate document clock wise 90°	boolean
[rotateccw]	Rotate document anti-clock wise 90°	boolean
cursor	Type of cursor. Available options are HAND/H, SELECT/S,ZOOM/Z. Case is irrelevant.	SELECT/S
scroll	Sets scroll. Available options are VERTICAL/V, HORIZONTAL/H,WRAPPED/W. Case is irrelevant.	VERTICAL/V
spread	Sets Odd or Even spread. Available options are ODD/O, EVEN/E,NONE/N. Case is irrelevant.	NONE/N
[fullScreen]	Show/hide presentation(full screen) button. Set false to hide	boolean	true
cursor	Type of cursor. Available options are HAND/H, SELECT/S,ZOOM/Z. Case is irrelevant.	SELECT/S
pagemode	State of sidebar. Available options are none, thumbs,bookmarks,attachments. E.g. pagemode=attachments.	none
[openFile]	Show/hide open file button. Set false to hide	boolean	true
[viewBookmark]	Show/hide bookmark button. Set false to hide	boolean	true
[showSpinner]	Show a simple css based spinner/progress before the document loads	boolean	true
locale	Set locale(language) of toolbar/buttons and other viewer elements. E.g. 'de-AT', 'en-GB' etc	string	browser's default language if present, otherwise en-US
[useOnlyCssZoom]	Instructs the viewer to use css based zoom. This will produce better zoom effect on mobile devices and tablets.	boolean	false
errorMessage	Custom error message	string
[errorAppend]	Appends custom error message to the end of other pdfjs error messages	true
[errorOverride]	Overrides all pdfjs error messages and shows only user's custom error message	boolean	false

Please note, copy step is mandatory to enjoy all of the different options listed above. You may also avoid this step and could directly use https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website if you wish to just use the default viewer

Usage

For your convenience a sample app using angular is available under this repository, if you would like to see it in action (Folder SampleApp). It shows many ways to configure this component for different needs.

Once your PdfJsViewerComponent is imported you can use it in your Angular application like this:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<ng2-pdfjs-viewer pdfSrc="your pdf file path"></ng2-pdfjs-viewer>

Here is a use case to download and open the pdf as byte array and open in new tab/window: Please note, pdfSrc can be a Blob or Uint8Array as well For [externalWindow]="true" to work, pop-ups needs to be enabled at browser level

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>

<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer 
    #pdfViewer
    [externalWindow]="true"
    [downloadFileName]="'mytestfile.pdf'"
    [openFile]="false"
    [viewBookmark]="false"
    [download]="false"></ng2-pdfjs-viewer>
</div>

<!-- your.component.ts-->
export class MyComponent implements OnInit {
  @ViewChild('pdfViewer') pdfViewer
  ...

  private downloadFile(url: string): any {
    return this.http.get(url, { responseType: ResponseContentType.Blob }).map(
      (res) => {
        return new Blob([res.blob()], { type: "application/pdf" });
      });
  }

  public openPdf() {
    let url = "url to fetch pdf as byte array";
    // url can be local url or remote http request to an api/pdf file. 
    // E.g: let url = "assets/pdf-sample.pdf";
    // E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // E.g: http://localhost:3000/api/GetMyPdf
    // Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html

    this.downloadFile(url).subscribe(

    (res) => {
        this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
        this.pdfViewer.refresh(); // Ask pdf viewer to load/reresh pdf
      }
    );
  }

Additional Information

Given below are examples of writing server apis(In aspnetcore c#) which returns pdfs as byte array. You can choose any server side technology as long as pdf is returned as byte array

Use case 1. As a RDLC local report viewer

[HttpGet]
[Route("MyReport")]
public IActionResult GetReport()
{
   // var reportObjectList1
   // var reportObjectList2
   var reportViewer = new ReportViewer {ProcessingMode = ProcessingMode.Local};
   reportViewer.LocalReport.ReportPath = "Reports/MyReport.rdlc";

   reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource1", reportObjectList1));
   reportViewer.LocalReport.DataSources.Add(new ReportDataSource("NameOfDataSource2", reportObjectList1));

   Warning[] warnings;
   string[] streamids;
   string mimeType;
   string encoding;
   string extension;

   var bytes = reportViewer.LocalReport.Render("application/pdf", null, out mimeType, out encoding, out extension, out streamids, out warnings);

   // The below content-disposition is lost when we create Blob() object in client browser. Hence commented out
   //var cd = new System.Net.Mime.ContentDisposition
   //{
   //    FileName = "somepdf.pdf",
   //    Inline = true
   //};
   //Response.Headers.Add("Content-Disposition", cd.ToString());
   
   return File(bytes, "application/pdf")
}

Use case 2. Return a physical pdf from server

[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
   var stream = await {{__get_stream_here__}}
   return File(stream, "application/pdf")); // FileStreamResult
   
  // OR
  // var bytes = await {{__get_bytes_here__}}
  // return File(bytes, "application/pdf")
}

Questions?

There are several how to questions being posted in issues section of this repository. Questions would be better answered if posted on www.stackoverflow.com with tag ng2-pdfjs-viewer (Please create ng2-pdfjs-viewer tag if not already present on SO)

Looking for old AngularJS? - The below library is quite useful

AngularJS angular-pdfjs-viewer

License

MIT © Code Hippie