An Angularjs directive <ng-pdf> to display PDF in the browser with PDFJS.
npm install angular-pdf>An AngularJS directive ng-pdf to display PDF files with PDFJS.
Integrate PDF files right into web pages.
Check package.json file for dependencies and their versions:
1. AngularJS - get the latest angular.min.js
- PDFJS - build the files pdf.js and pdf.worker.js
- Evergreen browsers
1. next / previous page
- zoom in / out / fit 100%
- rotate clockwise
- jump to a page number
- when scrolling, the pdf controls will get fixed position at the top
- define the view template
- define the path to pdf with scope variable
- handles error
- show loading of pdf
- show progress percentage of loading pdf
- insert password for protected PDFs
- dynamically change the pdf url
- support retina canvas
- set authorization or http headers
1. Install or copy over the file dist/angular-pdf.min.js or dist/angular-pdf.js
``shell`
npm install angular-pdf --save
or
shell`
bower install angular-pdf --save
- Include the path to the directive file in
`html`
- Include the directive as a dependency when defining the angular app:
`js`
var app = angular.module('App', ['pdf']);
- Include the directive with the attribute path to the partial under a controller
`html`
- as an option
`html`
scale attribute can also be page-fit
`html`
- as an option for initial page number
`html`
- as an option to add credentials / authorization
`html`
- to enable debugging console output (optional, disabled by default)
`html`
- Include the element to display the pdf in the template-url file
`html`
- Include the path to the pdf file in the controller
`js`
app.controller('DocCtrl', function($scope) {
$scope.pdfUrl = '/pdf/relativity.pdf';
});
- Set custom headers, e.g. authorization headers with option
`js`
app.controller('DocCtrl', function($scope) {
$scope.pdfUrl = '/pdf/relativity.pdf';
$scope.httpHeaders = { Authorization: 'Bearer some-aleatory-token' };
});
1. Next / Previous page: Include the controls in the view file as defined in the attribute template-url
`
- Zoom in / out / fit 100%: Include the controls in the view file as defined in the attribute
`
- Rotate clockwise: Include the controls in the view file as defined in the attribute and the initial class rotate0
`html`
...
include the css styles:
`css`
.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); }
- Jump to page number: Include the controls in the view file as defined in the attribute
`html`
Page: / {{pageCount}}
- Fixed pdf controls upon scrolling: Wrap the controls in the view file as defined in the attribute with a tag nav with an ng-class. Amend the scroll amount as required.
`html`
And include the relevant css styles as required:
`css`
.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 with a web server
Create a Blob:
`js`
currentBlob = new Blob([result], {type: 'application/pdf'});
$scope.pdfUrl = URL.createObjectURL(currentBlob);
In the controller, you can call the function $scope.onError:
`js`
$scope.onError = function(error) {
// handle the error
// console.log(error);
}
In the controller, you can call the function $scope.onLoad when the pdf succesfully loaded:
`js
$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
`js`
$scope.onProgress = function(progress) {
// handle a progress bar
// progress% = progress.loaded / progress.total
// console.log(progress);
}
In the controller, you can use the function scope.onPassword. This function is called when the PDF require an opening password.
`js`
$scope.onPassword = function (updatePasswordFn, passwordResponse) {
// if passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD
// you can provide the password calling updatePasswordFn('THE_PASSWORD')
// else if passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD
// provided password is not correct
};
1. If using with Angular UI modal, pageNum attribute is no longer required. Checkout the implementation
1. angular-pdf-viewer - a more self-contained directive
- ng-pdfviewer
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:
1. For patches, run the command:
`
npm run release patch
- For minor release, run the command:
`
npm run release minor
- For major release, run the command:
`
npm run release major