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;
};
}]);
- AngularJS (http://angularjs.org/)
- PDF.js (http://mozilla.github.io/pdf.js/)
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.
MIT. See LICENSE.md for further details.
Andreas Krennmair ak@synflood.at