This code provides a free PDF viewer built using AngularJS. The PDF viewer allows you to display and interact with PDF documents in your web application. It includes features such as navigating between pages, zooming in and out, rotating pages, and loading different PDF files.
The code consists of several AngularJS modules, controllers, directives, and services. It utilizes the PDF.js library for rendering and manipulating PDF files. The “pdfDelegate” service is responsible for handling PDF operations, such as moving between pages and changing zoom levels. The “PdfCtrl” controller manages the PDF viewer’s behavior and interacts with the “pdfDelegate” service.
You can customize the PDF viewer by modifying the directives, controllers, and HTML templates according to your requirements. Additionally, the provided example demonstrates how to use the PDF viewer by setting the PDF file URL dynamically using the controller’s scope variables.
How to Create PDF File Viewer Using AngularJS
First of all, load the Basscss by adding the following CDN link into the head tag of your web/app project.
<link rel='stylesheet' href='https://d2v52k3cl9vedd.cloudfront.net/basscss/4.1.2/basscss.min.css'>
Create the HTML structure for the PDF viewer as follows:
<body ng-app="testApp">
<div class="container" ng-controller="AppCtrl">
<div class="clearfix">
<header class="p2 bright-blue bg-blue">
<div class="container sm-table">
<div class="sm-table-cell py4">
<h1 class="h0 mt0 mb0 white inline">AngularJS PDF Viewer</h1>
<a class="h0 button dark-gray" href="//github.com/winkerVSbecks/angular-pdf-viewer">github</a>
</div>
</div>
</header>
<pdf-viewer
delegate-handle="my-pdf-container"
url="pdfUrl"
scale="1"
show-toolbar="true"></pdf-viewer>
<footer class="py4">
<div class="sm-table">
<div class="sm-table-cell full-width py2 xs-center">
<div class="h5 bold px1">
<a ng-click="loadNewFile(relativity)"
class="button button-narrow button-nav-light">
Load the Relativity PDF
</a>
<a ng-click="loadNewFile(material)"
class="button button-narrow button-nav-light">
Load the Material Design PDF
</a>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
Now, load the Angular JS and PDF.js by adding the following CDN links before closing the body tag:
<!-- Angular JS --> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js'></script> <!-- PDF JS --> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/pdf.combined.js'></script>
Finally, add the following JavaScript code to your project to initialize the pdf viewer:
function delegateService(e) {
return ["$log", function (t) {
function n(e) {
this.handle = e
}
var a = this,
o = this._instances = [];
this._registerInstance = function (e, t) {
return e.$$delegateHandle = t, o.push(e),
function () {
var t = o.indexOf(e); - 1 !== t && o.splice(t, 1)
}
}, this.$getByHandle = function (e) {
return e ? new n(e) : a
}, e.forEach(function (e) {
n.prototype[e] = function () {
var n, a, r = this.handle,
l = arguments,
u = 0;
return o.forEach(function (t) {
t.$$delegateHandle === r && (u++, a = t[e].apply(t, l), 1 === u && (n = a))
}), u ? n : t.warn('Delegate for handle "' + this.handle + '" could not find a corresponding element with delegate-handle="' + this.handle + '"! ' + e + "() was not called!\nPossible cause: If you are calling " + e + '() immediately, and your element with delegate-handle="' + this.handle + '" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to ' + e + "() and try again.")
}, a[e] = function () {
var t, n, a = arguments;
return o.forEach(function (o, r) {
n = o[e].apply(o, a), 0 === r && (t = n)
}), t
}
})
}]
}
angular.module("pdf", []).service("pdfDelegate", delegateService(["prev", "next", "zoomIn", "zoomOut", "rotate", "getPageCount", "getCurrentPage", "goToPage", "load"])), angular.module("pdf").controller("PdfCtrl", ["$scope", "$element", "$attrs", "pdfDelegate", "$log", function (e, t, n, a, o) {
var r = a._registerInstance(this, n.delegateHandle);
e.$on("$destroy", r);
var l, u = this,
i = e.$eval(n.url);
e.pageCount = 0;
var c = 1,
d = 0,
g = n.scale ? n.scale : 1,
s = t.find("canvas")[0],
f = s.getContext("2d"),
p = function (e) {
angular.isNumber(e) || (e = parseInt(e)), l.getPage(e).then(function (e) {
var t = e.getViewport(g);
s.height = t.height, s.width = t.width;
var n = {
canvasContext: f,
viewport: t
};
e.render(n)
})
},
m = function () {
s.style.webkitTransform = "rotate(" + d + "deg)", s.style.MozTransform = "rotate(" + d + "deg)", s.style.msTransform = "rotate(" + d + "deg)", s.style.OTransform = "rotate(" + d + "deg)", s.style.transform = "rotate(" + d + "deg)"
};
u.prev = function () {
1 >= c || (c = parseInt(c, 10) - 1, p(c))
}, u.next = function () {
c >= l.numPages || (c = parseInt(c, 10) + 1, p(c))
}, u.zoomIn = function () {
return g = parseFloat(g) + .2, p(c), g
}, u.zoomOut = function () {
return g = parseFloat(g) - .2, p(c), g
}, u.rotate = function () {
d = 0 === d ? 90 : 90 === d ? 180 : 180 === d ? 270 : 0, m()
}, u.getPageCount = function () {
return e.pageCount
}, u.getCurrentPage = function () {
return c
}, u.goToPage = function (e) {
null !== l && (c = e, p(e))
}, u.load = function (t) {
t && (i = t), PDFJS.getDocument(i).then(function (t) {
l = t, p(1), e.$apply(function () {
e.pageCount = t.numPages
})
}, o.error)
}, u.load()
}]), angular.module("pdf").directive("pdfViewerToolbar", ["pdfDelegate", function (e) {
return {
restrict: "E",
template: '<div class="clearfix mb2 white bg-blue"><div class="left"><a href=""ng-click="prev()"class="button py2 m0 button-nav-dark">Back</a><a href=""ng-click="next()"class="button py2 m0 button-nav-dark">Next</a><a href=""ng-click="zoomIn()"class="button py2 m0 button-nav-dark">Zoom In</a><a href=""ng-click="zoomOut()"class="button py2 m0 button-nav-dark">Zoom Out</a><a href=""ng-click="rotate()"class="button py2 m0 button-nav-dark">Rotate</a><span class="px1">Page</span> <input type="text" class="field-dark" min=1 ng-model="currentPage" ng-change="goToPage()" style="width: 10%"> / {{pageCount}}</div></div>',
scope: {
pageCount: "="
},
link: function (t, n, a) {
var o = a.delegateHandle;
t.currentPage = 1, t.prev = function () {
e.$getByHandle(o).prev(), r()
}, t.next = function () {
e.$getByHandle(o).next(), r()
}, t.zoomIn = function () {
e.$getByHandle(o).zoomIn()
}, t.zoomOut = function () {
e.$getByHandle(o).zoomOut()
}, t.rotate = function () {
e.$getByHandle(o).rotate()
}, t.goToPage = function () {
e.$getByHandle(o).goToPage(t.currentPage)
};
var r = function () {
t.currentPage = e.$getByHandle(o).getCurrentPage()
}
}
}
}]), angular.module("pdf").directive("pdfViewer", ["$window", "$log", "pdfDelegate", function () {
return {
restrict: "E",
template: '<pdf-viewer-toolbar delegate-handle="{{id}}" page-count="pageCount"></pdf-viewer-toolbar><canvas></canvas>',
scope: !0,
controller: "PdfCtrl",
link: function (e, t, n) {
e.id = n.delegateHandle, e.showToolbar = e.$eval(n.showToolbar) || !1
}
}
}]);
angular.module('testApp', ['pdf'])
.controller('AppCtrl', [
'$scope',
'pdfDelegate',
function($scope, pdfDelegate, $log) {
$scope.relativity = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/relativity.pdf';
$scope.material = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/material-design-2.pdf';
$scope.pdfUrl = $scope.material;
}]);
That’s all! hopefully, you have successfully integrated this free Pdf file viewer into your AngularJS project. If you have any questions or suggestions, feel free to comment below.
