An AngularJS directive to display PDFs.
-
bower install angular-pdf-viewer
-
Include the path to the lib, AngularJS and PDFJS:
<script src="bower_components/pdfjs-dist/build/pdf.combined.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf/dist/angular-pdf-viewer.min.js"></script>
- Include the lib as a dependency in your angular app:
var app = angular.module('App', ['pdf']);
The URL, scale and delegate-handle can be set using the attributes:
<pdf-viewer
delegate-handle="relativity-special-general-theory"
url="pdfUrl"
scale="1"
show-nav="true"></pdf-viewer>
The pdfDelegate service allows you to access and control individual instances of a directive. This allows us to have multiple instances of the same directive in the same controller.
Inject the pdfDelegate
service into your controller. You can then fetch an instance using it's delegate handle and call methods on it:
pdfDelegate.$getByHandle('relativity-special-general-theory').zoomIn();
The following methods are available to the delegate:
- prev
- next
- zoomIn
- zoomOut
- rotate (clockwise by 90 degrees)
- getPageCount
- getCurrentPage
- goToPage(pageNumber)
The default toolbar can be shown or hidden using the show-toolbar
attribute. Since the PDF can be easily controlled using the delegate service it's quite trivial to build a custom toolbar. Or place the toolbar on a separate scope.
PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.