\n\nThis is a simple library wraps mozilla's pdfjs and viewerjs into an angular2+ component.\n\n### Open in a new tab/window\n\n\n### Embed pdf into any angular component/page\n\n\n## Installation\n\n## Step 1: To install `ng2-pdfjs-viewer`, run:\n\n```bash\n$ npm install ng2-pdfjs-viewer --save\n```\n\nAnd then configure it in your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import PdfJsViewerModule module\nimport { PdfJsViewerModule } from 'ng2-pdfjs-viewer';\n\n@NgModule({\n declarations: [\n AppComponent,\n ],\n imports: [\n BrowserModule,\n // Add to declarations\n PdfJsViewerModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Step 2: To use this library you need a copy of pdfjs\n1. Using modified version of viewerJs available in the package (Recommended approach) \n - Either copy `node_modules\\ng2-pdfjs-viewer\\pdfjs` to your public or asset folder Or use `TransferWebpackPlugin` or something similar to make sure the static files are accessible from the public folder in your application/webserver. Please note, if you decide to put `pdfjs` folder anywhere else other than the `assets` folder, make sure you also set `[pdfJsFolder]` property to help locate the folder. \n\n `TransferWebpackPlugin` Sample code \n ```typescript\n var TransferWebpackPlugin = require('transfer-webpack-plugin');\n ...\n plugins: [\n new TransferWebpackPlugin([\n { from: 'node_modules\\ng2-pdfjs-viewer\\pdfjs', to: path.join(__dirname, 'assets') }\n ])\n ]\n ```\n Now you can use additional settings such as \n `[pdfJsFolder]`: To set the folder path under `web` and `build` resides. \n `[externalWindow]`: To decide pdf should be inline or in a new tab \n `[openFile]`: Show/hide open file icon \n `[viewBookmark]`: Show/hide bookmark icon \n `[download]`: Show/hide download icon \n `[showSpinner]`: Show a simple css based spinner/progress before the pdf loads \n\nOR \n\n2. Using pdf-js-gh-pages \n - Download pdfjs-gh-pages from here: https://github.com/mozilla/pdf.js/archive/gh-pages.zip and extract it. \n - Create a `pdfjs` folder under your angular2+ applications `assets` folder \n - Copy `pdf.js-gh-pages/build` and `pdf.js-gh-pages/web` folders from extracted package to `pdfjs` folder. \n - The web/ directory contains a 1 MB PDF file called \"compressed.tracemonkey-pldi-09.pdf\". This file is a sample and can safely be removed. \n ps: More info can be found here: https://github.com/mozilla/pdf.js/wiki/setup-pdf.js-in-a-website\n\n## Usage \n\n`For your convenience a sample app using angular6 is available under this repository, if you would like to see it in action (Folder ng6SampleApp). It shows many ways to configure this component for different needs.`\n\nOnce your PdfJsViewerComponent is imported you can use it in your Angular application like this:\n\n```xml\n\n
\n {{title}}\n
\n\n```\n\nHere is a use case to download and open the pdf as byte array and open in new tab/window:\nPlease note, pdfSrc can be a Blob or Uint8Array as well\nFor [externalWindow]=\"true\" to work, pop-ups needs to be enabled at browser level\n\n```xml\n\n\n\n\n
![\"downloads\"](\"https://img.shields.io/npm/dm/ng2-pdfjs-viewer.svg?style=flat\")
![\"npm](\"https://badge.fury.io/js/ng2-pdfjs-viewer.svg\"){kind=icon}
\n \n![\"angular2+](\"/sampledoc/viewerImage.JPG\")
\n\n### Embed pdf into any angular component/page\n![\"angular2+](\"/sampledoc/viewerImageEmbedded2.jpg\")
\n\n## Installation\n\n## Step 1: To install `ng2-pdfjs-viewer`, run:\n\n```bash\n$ npm install ng2-pdfjs-viewer --save\n```\n\nAnd then configure it in your Angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import PdfJsViewerModule module\nimport { PdfJsViewerModule } from 'ng2-pdfjs-viewer';\n\n@NgModule({\n declarations: [\n AppComponent,\n ],\n imports: [\n BrowserModule,\n // Add to declarations\n PdfJsViewerModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Step 2: To use this library you need a copy of pdfjs\n1. Using modified version of viewerJs available in the package (Recommended approach) \n - Either copy `node_modules\\ng2-pdfjs-viewer\\pdfjs` to your public or asset folder Or use `TransferWebpackPlugin` or something similar to make sure the static files are accessible from the public folder in your application/webserver. Please note, if you decide to put `pdfjs` folder anywhere else other than the `assets` folder, make sure you also set `[pdfJsFolder]` property to help locate the folder. \n\n `TransferWebpackPlugin` Sample code \n ```typescript\n var TransferWebpackPlugin = require('transfer-webpack-plugin');\n ...\n plugins: [\n new TransferWebpackPlugin([\n { from: 'node_modules\\ng2-pdfjs-viewer\\pdfjs', to: path.join(__dirname, 'assets') }\n ])\n ]\n ```\n Now you can use additional settings such as \n `[pdfJsFolder]`: To set the folder path under `web` and `build` resides. \n `[externalWindow]`: To decide pdf should be inline or in a new tab \n `[openFile]`: Show/hide open file icon \n `[viewBookmark]`: Show/hide bookmark icon \n `[download]`: Show/hide download icon \n `[showSpinner]`: Show a simple css based spinner/progress before the pdf loads \n\nOR \n\n2. Using pdf-js-gh-pages \n - Download pdfjs-gh-pages from here: https://github.com/mozilla/pdf.js/archive/gh-pages.zip and extract it. \n - Create a `pdfjs` folder under your angular2+ applications `assets` folder \n - Copy `pdf.js-gh-pages/build` and `pdf.js-gh-pages/web` folders from extracted package to `pdfjs` folder. \n - The web/ directory contains a 1 MB PDF file called \"compressed.tracemonkey-pldi-09.pdf\". This file is a sample and can safely be removed. \n ps: More info can be found here: https://github.com/mozilla/pdf.js/wiki/setup-pdf.js-in-a-website\n\n## Usage \n\n`For your convenience a sample app using angular6 is available under this repository, if you would like to see it in action (Folder ng6SampleApp). It shows many ways to configure this component for different needs.`\n\nOnce your PdfJsViewerComponent is imported you can use it in your Angular application like this:\n\n```xml\n\n