ng-pdfviewer
ng-pdfviewer copied to clipboard
AngularJS PDF viewer directive using pdf.js.
ng-pdfviewer
*** WARNING *** Since I keep getting support requests for this: I haven't maintained ng-pdfviewer for ages, and I do not plan to do any further work on it. DO NOT USE THIS IN PRODUCTION!!!
AngularJS PDF viewer directive using pdf.js.
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
and in your AngularJS code:
var app = angular.module('testApp', [ 'ngPDFViewer' ]);
app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
$scope.viewer = pdf.Instance("viewer");
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
}]);
Requirements
- AngularJS (http://angularjs.org/)
- PDF.js (http://mozilla.github.io/pdf.js/)
Usage
Include ng-pdfviewer.js as JavaScript file, along with pdf.js and pdf.compat.js.
Declare ngPDFViewer as dependency to your module.
You can now use the pdfviewer tag in your HTML source.
License
MIT. See LICENSE.md for further details.
Author
Andreas Krennmair [email protected]