ng-pdf-viewer

Mozilla pdf.js web viewer as an Angular 1.5+ Component

https://samrose3.github.io/ng-pdf-viewer

What is this?

We needed a custom document viewer that could be embedded into any Angular project. I found Mozilla's PDF.js and their viewer.html and thought it would be a good fit. The viewer.html was customizable and allowed us to easily tap into several advanced features, such as searching text within the document and entering fullscreen mode. This project is that viewer reimplemented as an Angular component. The viewer takes on the size of it's parent container, and the some of the toolbar's functionality is exposed to outside components via bindings.

Setup

1. The viewer needs ocLazyLoad to load in its assets. Include ocLazyLoad in your project with the commmand bower install oclazyload or npm install oclazyload

2. Download / clone the repo or just thedist folder

3. Include the dist/pdfViewer.js into your project (script tags, browserify, etc)

4. Copy the dist/pdfjs folder into your public folder to be accessible via HTTP requests (for lazy loading of assets)

5. Add pdf.viewer to your Angular app's module dependencies

   var app = angular.module('app', ['pdf.viewer', 'oc.lazyload']);

6. Set the pdfViewerServiceProvider to the path where you copied the dist/pdfjs folder

   app.config(['pdfViewerServiceProvider',
   	function(pdfViewerServiceProvider) {
   		pdfViewerServiceProvider.setPath('<PATH>/pdfjs');
   }]);

7. Include the pdf-view component in your angular app template

   <div>
   	<pdf-viewer file="{{file}}"></pdf-viewer>
   </div>