akrennmair / ng-pdfviewer

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()">&lt;</button>
<button ng-click="nextPage()">&gt;</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 [e-mail]