PDF-Anweisung zeigt keine PDF-Datei in Angular JS

Question

Ich muss ein PDF in Angular öffnen, habe ich versucht mit pdf.js und pdf.cobined.js Direktiven, aber nicht in der Lage, die Daten anzuzeigen. Mein Angular ver - 1.4.8
Da es keine herunterladbare Schaltfläche oder PDF-URL sichtbar haben sollte. So kann ich Google Docs Viewer nicht verwenden oder direkt als BLOB-Objekt öffnen.
Kann mir jemand bei der Lösung dieses Problems helfen, sorry bit lang, aber jede Hilfe wird geschätzt, Danke !!

-Code -
1) Die erste Steuerung, die Methode ein modales Fenster auf Klick zu öffnen hat -

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

2) tariff.html hat ein div mit ng-pdf und Controller wie diese -

<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> 

Anbringen Schnappschuss für das Ansprechen der Last PDF-Daten -

Auch "pdf" Abhängigkeitsfehler auf Aktualisierung des Browsers kommt aber nicht auf dem ersten Laden -

Answer 1

Mein Problem war mit div. Ich hatte CSS-Klasse für Popup/Modal Window nicht enthalten. Das Overlay-Fenster wurde nicht angezeigt, obwohl die Daten wie in den obigen Logs angezeigt geladen wurden.
Der Abhängigkeitsfehler wurde behoben, als ich PDF zu meiner Basisklasse app.modules.js hinzufügte und somit über die App zugänglich war.

Answer 2

Sie müssen angular-pdf.js in Ihren HTML-Code einfügen, damit können Sie die Anweisung ng-pdf verwenden.

Sie müssen auch die Richtlinie als eine Abhängigkeit schließen, wenn der Winkel App definieren:

var app = angular.module('app.profile', ['pdf']);

Sie können ein Beispiel siehe "Getting Started" unter diesem Link: https://github.com/sayanee/angularjs-pdf#getting-started