Version: 2.1.3
An AngularJS directive
ng-pdf
to display PDF files with PDFJS.
Overview [demo]
Integrate PDF files right into web pages.
Check bower.json
file for dependencies and their versions:
- AngularJS - get the latest angular.min.js
- PDFJS - build the files
pdf.js
andpdf.worker.js
- Waypoints - get the latest waypoints bower package and include
noframework.waypoints.min.js
in your project. - Evergreen browsers
- zoom in / out / fit 100%
- rotate clockwise
- continous scrolling through pages
- confine rendering to container
- define the view template
- define the path to pdf with scope variable
- handles error
- show loading of pdf
- show progress percentage of loading pdf
- dynamically change the pdf url
- support retina canvas
-
install or copy over the file
dist/angular-pdf.min.js
ordist/angular-pdf.js
bower install angular-pdf
-
include the path to the direcitve file in
index.html
<script src="js/vendor/angular-pdf/dist/angular-pdf.js"></script>
-
include the directive as a dependency when defining the angular app:
var app = angular.module('App', ['pdf']);
-
include the directive with the attribute path to the partial under a controller
<div class="wrapper" ng-controller="DocCtrl"> <ng-pdf template-url="/partials/viewer.html"></ng-pdf> </div>
-
scale
as an option<ng-pdf template-url="/partials/viewer.html" scale=1></ng-pdf>
scale
attribute can also bepage-fit
<ng-pdf template-url="/partials/viewer.html" scale="page-fit"></ng-pdf>
-
containerid
as an option forid
of the canvas container (default forcontainerid
ispdf-container
)<ng-pdf template-url="/partials/viewer.html" containerid="mycanvas"></ng-pdf>
-
usecredentials
as an option to add credentials / authorisation<ng-pdf template-url="/partials/viewer.html" usecredentials="true"></ng-pdf>
-
debug
to enable debugging console output (optional, disabled by default)<ng-pdf template-url="/partials/viewer.html" debug="true"></ng-pdf>
-
-
include the
container
element to display the pdf in the template-url file<div id="pdf-container"> <canvas ng-repeat="id in pageIDs" ng-attr-id="{{id}}"></canvas> </div>
you have to use the
pageIDs
to find the list of IDs for each page and set the attributeid
accordingly. Thecanvas
element can be styled as you with. -
include the path to the pdf file in the controller
app.controller('DocCtrl', function($scope) { $scope.pdfUrl = '/pdf/relativity.pdf'; });
or provide a value for
pdfData
field of the parent.
-
Zoom in / out / fit 100%: Include the controls in the view file as defined in the attribute
template-url
<button ng-click="zoomIn()">+</span></button> <button ng-click="fit()">100%</span></button> <button ng-click="zoomOut()">-</span></button>
-
Rotate clockwise: Include the controls in the view file as defined in the attribute
template-url
and the initial classrotate0
<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); }
-
Confine the rendering within fixed size container: When the
canvas
elements are included in a fixed size controller, the waypoints need to be given the parent context. Add the optioncontext="containerID"
tong-pdf
directive to indicate this. This way, the current page is corectly updated on scroll. -
Fixed pdf controls upon scrolling: Wrap the controls in the view file as defined in the attribute
template-url
with a tagnav
with anng-class
. Amend the scroll amount as required.<nav ng-class="{'pdf-controls fixed': scroll > 100, 'pdf-controls': scroll <= 100}"> ... </nav>
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; }
-
open the file
index.html
with a web server
Create a Blob:
currentBlob = new Blob([result], {type: 'application/pdf'});
$scope.pdfUrl = URL.createObjectURL(currentBlob);
or set attribute pdfData
.
In the controller, you can call the function $scope.onError
:
$scope.onError = function(error) {
// handle the error
// console.log(error);
}
angularjs-pdf
uses waypoints
to determine on what page the current view is. Display variable pageNum
to inform the user or the postition. pageNum
is automatically updated upon scrolling.
In the controller, you can call the function $scope.onLoad
when the pdf succesfully loaded:
$scope.loading = 'loading';
$scope.onLoad = function() {
// do something when pdf is fully loaded
// $scope.loading = '';
}
In the controller, you can call the function $scope.onProgress
$scope.onProgress = function(progress) {
// handle a progress bar
// progress% = progress.loaded / progress.total
// console.log(progress);
}
- If using with Angular UI modal,
pageNum
attribute is no longer required. Checkout the implementation
- angular-pdf-viewer - a more self-contained directive
PDF example used is Relativity: The Special and General Theory by Albert Einstein as kindly organized and made available free by Project Gutenberg.
This project is an OPEN Open Source Project. This means that:
Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.
Please see CONTRIBUTING.md
for details.
This repository follows the Semantic Versioning guidelines:
-
For patches, run the command:
grunt bump
-
For minor release, run the command:
grunt bump:minor
-
For major release, run the command:
grunt bump:major
(C) Sayanee Basu 2015, released under an MIT license