Version: 0.2.5

An AngularJS directive ng-pdf to display PDF files with PDFJS.

Integrate PDF files right into web pages.

##Requirements

1. AngularJS - get the latest angular.min.js
2. PDFJS - build the files pdf.js and pdf.worker.js

###Features

1. next / previous page
2. zoom in / out
3. rotate clockwise
4. jump to a page number
5. when scrolling, the pdf controls will get fixed position at the top
6. define the view template
7. define the path to pdf with scope variable

1. install or copy over the file dist/angular-pdf.min.js or dist/angular-pdf.js:

   bower install angular-pdf
   

2. include the path to the lib file in index.html:

   <script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>
   

3. include the lib as a dependency when defining the angular app:

   var app = angular.module('App', ['pdf']);
   

4. include the directive with the following attributes: url, delegate-handle and scale:

   <div class="wrapper" ng-controller="DocCtrl">
       <ng-pdf delegate-handle="pdf-one" url="pdfUrl" scale="1.5"></ng-pdf>
   </div>
   

The delegate 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.

1. You can fetch an instance using it's delegate handle. Make sure to inject the $pdfDelegate service into your controller:

   app.controller('DocCtrl', function($scope) {
       $pdfDelegate.get('pdf-one')
           .then(function (_pdf) {
               $scope.pdfOne = _pdf;
           }, $log.error);
   });
   

2. Next / Previous page

   $scope.pdfOne.goNext();
   $scope.pdfOne.goPrevious();
   

3. Zoom in / out

   pdfOne.zoomIn()
   pdfOne.zoomOut()
   

4. Rotate clockwise

   pdfOne.rotate()
   

   include the css styles:

   .rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
   .rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
   .rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
   .rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }
   

5. Jump to page number

   $scope.pdfOne.goToPage(pageNum);
   

6. Get current page number and total page count

   $scope.pdfOne.currentPage();
   $scope.pdfOne.getPageCount();
   

7. open the file index.html with a web server

##Similar projects

1. ng-pdfviewer

##Credit

PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.

(C) Sayanee Basu 2014, released under an MIT license