2017-06-01 85 views
3

我需要在Angular中打開PDF,我嘗試過使用pdf.js和pdf.combined.js指令,但無法顯示數據。 My Angular ver - 1.4.8
由於它不應該有可下載的按鈕或PDF URL visible.So我不能使用谷歌文檔查看器或直接打開它作爲BLOB對象。
有人可以幫助我解決這個問題,對不起有點冗長,但任何幫助表示讚賞,謝謝!
pdf指令沒有在Angular JS中顯示pdf文件

代碼 -

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

2)tariff.html具有NG-PDF和控制器這樣一個div - -

1),其具有方法打開上點擊一個模式窗口第一控制器

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

附加快照PDF數據加載的響應 - enter image description here

而且 「PDF」 依賴錯誤出現在瀏覽器刷新,但不能在第一裝載 - enter image description here

回答

3

我的問題與div。我沒有爲Popup/Modal Window添加CSS類。因此,雖然數據正在如上述日誌中所示加載,但未顯示覆蓋窗口。
當我將PDF添加到我的app.modules.js基類依賴項時,依賴項錯誤得到解決,因此可以通過應用程序訪問。

0

您需要在您的HTML中包含angular-pdf.js,這允許您使用ng-pdf指令。

你也需要包括指令作爲一個依賴定義角應用程序時:

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

你可以看到的「入門」的例子在此鏈接:https://github.com/sayanee/angularjs-pdf#getting-started