pdf directive not showing pdf file in Angular JS

Question

I need to open a PDF in Angular, I have tried using pdf.js and pdf.combined.js directives but unable to display the data. My Angular ver - 1.4.8
Since it shouldn't have downloadable button or PDF URL visible.So i can't use google docs viewer or directly opening it as BLOB Object.
Can someone help me in solving this, sorry bit lengthy but any help is appreciated,Thanks !!

Code -
1) First controller which has method to open a modal window on click -

vm.getCallRates = function() {
        ModalService.showModal({
            templateUrl: absoluteURL('app/profile/tariff.html'),
            inputs: {},
            controller: 'tariffController'
        });
}

2) tariff.html has a div with ng-pdf and 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) tariffController -

(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>&lt;</span></button>
<button ng-click="goNext()"><span>&gt;</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>

&nbsp;&nbsp;
<span>Document URL: </span>
<input type="text" ng-model="pdfUrl">
</nav>
<hr>
{{loading}}
<canvas id="pdf-canvas"></canvas>

Attaching snapshot for response of PDF data load -

Also "pdf" dependency error comes on browser refresh but not on first loading -

Kishor · Accepted Answer · 2017-06-09 18:38:23Z

3

My problem was with div. I had not included CSS class for Popup / Modal Window. So overlay window was not showing although data was getting loaded as shown in above logs.
The dependency error got resolved when i added PDF to my app.modules.js base class dependency,hence accessible through out app.

answered Jun 9, 2017 at 18:38

Kishor

2011 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denny Biasiolli · Accepted Answer · 2017-06-01 17:51:58Z

0

You need to include angular-pdf.js in your HTML, this allows you to use the ng-pdf directive.

You need also to include the directive as a dependency when defining the angular app:

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

edited Jun 1, 2017 at 17:51

answered Jun 1, 2017 at 17:40

Denny Biasiolli

613 silver badges5 bronze badges

Collectives™ on Stack Overflow

pdf directive not showing pdf file in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related