angular-pdf

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

Overview [demo]

Integrate PDF files right into web pages.

###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

##Requirements

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

Getting Started

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 direcitve file in index.html

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

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

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

4. include the directive with the 3 attribute:

   1. template-url: path to the partial under a controller
   2. canvasid: id of the canvas tag you intend put in the next step 5
   3. scale: initial scale of the pdf

   <div class="wrapper" ng-controller="DocCtrl">
       <ng-pdf template-url="/partials/viewer.html" canvasid="pdf-canvas" scale="1"></ng-pdf>
   </div>
   

5. include the canvas element to display the pdf in the template-url file

   <canvas id="pdf-canvas"></canvas>
   

6. include the path to the pdf file in the controller

   app.controller('DocCtrl', function($scope) {
       $scope.pdfUrl = '/pdf/relativity.pdf';
   });
   

###Options

1. Next / Previous page: Include the controls in the view file as defined in the attribute template-url

   <button ng-click="goPrevious()"><</span></button>
   <button ng-click="goNext()">></span></button>
   

2. Zoom in / out: Include the controls in the view file as defined in the attribute template-url

   <button ng-click="zoomIn()">+</span></button>
   <button ng-click="zoomOut()">-</span></button>
   

3. Rotate clockwise: Include the controls in the view file as defined in the attribute template-url and the initial class rotate0

   <button ng-click="rotate()">90</span></button>
   ...
   <canvas id="pdf-canvas" class="rotate0"></canvas>
   

   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); }
   

4. Jump to page number: Include the controls in the view file as defined in the attribute template-url

   <span>Page: </span><input type="text" min=1 ng-model="pageNum"><span> / {{pageCount}}</span>
   

5. Fixed pdf controls upon scrolling: Wrap the controls in the view file as defined in the attribute template-url with a tag nav with an ng-class. Amend the scroll amount as required.

   <nav ng-class="getNavStyle(scroll)">
   ...
   </nav>
   

   Declare the ng-class logic in the controller js/controllers/docCtrl.js

   $scope.getNavStyle = function(scroll) {
       if(scroll > 100) return 'pdf-controls fixed';
       else return 'pdf-controls';
    }
   

   And include the relevant css styles as required:

   .pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;}
   .fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; }
   

6. 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.

License

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