2017-06-01 72 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