ng-pdfviewer

AngularJS PDF viewer directive using pdf.js.

<button ng-click="prevPage()">&lt;</button>
<button ng-click="nextPage()">&gt;</button>
<button ng-click="setScale(1.8)">ZOOM</button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer scale="{{scale}}" pages-to-show="{{pages}}" 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.setScale = function(v) {
		$scope.instance.setScale(v);
	};

	$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 ak@synflood.at