Question

我需要在Angular中打开PDF，我尝试过使用pdf.js和pdf.combined.js指令但无法显示数据。 My Angular ver - 1.4.8
因为它不应该有可下载的按钮或PDF URL。所以我不能使用谷歌文档查看器或直接打开它作为BLOB对象。
有人可以帮助我解决这个问题，抱歉有点冗长，但任何帮助表示赞赏，谢谢!!

代码 -
1）第一个控制器，它具有在点击时打开模态窗口的方法 -

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

2）tariff.html有一个带有ng-pdf的div和这样的控制器 -

<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数据加载响应的快照 -

另外＆＃34; pdf＆＃34;依赖性错误来自浏览器刷新，但不会在首次加载时出现 -

Answer 1

我的问题在于div。我没有为Popup / Modal Window包含CSS类。因此，如上面的日志所示，虽然数据已加载，但覆盖窗口未显示当我将PDF添加到我的app.modules.js基类依赖项时，依赖性错误得到解决，因此可以通过应用程序访问。

Answer 2

您需要在HTML中加入angular-pdf.js，这样您才能使用ng-pdf指令。

在定义角度应用程序时，您还需要将该指令包含为依赖项：

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

你可以看一个＆＃34;入门的例子＆＃34;在此链接：https://github.com/sayanee/angularjs-pdf#getting-started

pdf指令未在Angular JS中显示pdf文件

2 个答案: