Pdf directive not showing pdf file in Angular JS
I need to open a PDF in Angular, I tried using the pdf.js and pdf.combined.js directives but couldn't display the data. My Angular ver is 1.4.8
Since it shouldn't have a loadable button or PDF url visible. So I cannot use the google doc viewer or directly open it as a blob.
Can anyone help me with solving this, sorry, bit long, but any help is appreciated, thanks!
Code -
1) First controller that has a method to open a modal window on click -
vm.getCallRates = function() {
ModalService.showModal({
templateUrl: absoluteURL('app/profile/tariff.html'),
inputs: {},
controller: 'tariffController'
});
}
2) the tariff package .tt has a div with ng-pdf and a controller like this -
<div ng-controller="tariffController">
<ng-pdf template-url="app/profile/pdfViewer.html" canvasid="pdf-canvas"
scale="1.5" ></ng-pdf>
</div>
3) taxController -
(function () {
'use strict';
angular
.module('app.profile')
.controller('tariffController', tariffController);
tariffController.$inject = ['$scope'];
function tariffController($scope) {
$scope.pdfUrl = "http://172.16.23.26:3123/images/Invoice.pdf";
//$scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein';
//$scope.pdfPassword = 'test';
$scope.scroll = 0;
$scope.loading = 'loading';
$scope.getNavStyle = function(scroll) {
if(scroll > 100) return 'pdf-controls fixed';
else return 'pdf-controls';
}
$scope.onError = function(error) {
console.log(error);
}
$scope.onLoad = function() {
$scope.loading = '';
}
$scope.onProgress = function (progressData) {
console.log(progressData);
};
$scope.onPassword = function (updatePasswordFn, passwordResponse) {
if (passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD) {
updatePasswordFn($scope.pdfPassword);
} else if (passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
console.log('Incorrect password')
}
};
}
}());
4) pdfViewer.html -
<nav ng-class="getNavStyle(scroll)">
<button ng-click="goPrevious()"><span><</span></button>
<button ng-click="goNext()"><span>></span></button>
<button ng-click="zoomIn()"><span>+</span></button>
<button ng-click="fit()"><span>100%</span></button>
<button ng-click="zoomOut()"><span>-</span></button>
<button ng-click="rotate()"><span>90</span></button>
<span>Page: </span>
<input type="text" min=1 ng-model="pageNum">
<span> / {{pageCount}}</span>
<span>Document URL: </span>
<input type="text" ng-model="pdfUrl">
</nav>
<hr>
{{loading}}
<canvas id="pdf-canvas"></canvas>
Attaching a Snapshot for PDF Data Download Response - 
Also the "pdf" error is related to refreshing the browser but not on first load - 
source to share
My problem was with the div. I have not included the CSS class for the popup / modal. The overlay window was not showing although the data was loading as shown in the above logs.
The dependency error was resolved when I added the PDF to my base class dependency app.modules.js, hence accessible through the application.
source to share
You need to include angular-pdf.js
in your HTML, this allows the directive to be used ng-pdf
.
You also need to include the directive as a dependency when defining your angular application:
var app = angular.module('app.profile', ['pdf']);
You can see an example of "getting started" at this link: https://github.com/sayanee/angularjs-pdf#getting-started
source to share