AngularJS PDF预览过滤器无法正常工作

时间:2017-02-02 12:37:24

标签: javascript angularjs pdf

我想在我的网页上预览PDF。我使用过这段代码:



var $scope;
angular.module('miniapp', ['phonecatFilters', 'ngSanitize']);

function Ctrl($scope) {
    $scope.test = 'Example from: ';
    $scope.file = {
        pdf: true
    };
}
angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
}).filter('iconify', function () { // My custom filter
        return function (input) {
            return '<object data="http://apps.deprigo.com/files/orders/1486031377-20022.pdf" type="application/pdf" width="100%" height="300"><embed src="http://apps.deprigo.com/files/orders/1486031377-20022.pdf" type="application/pdf" /></object>';
        }
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.min.js"></script>
<div ng-app="miniapp">
  <div ng-controller="Ctrl">
      <h1>{{test}}</h1>
      <div>Preview PDF:<br /><span ng-bind-html='file.pdf | iconify'></span>
      </div>
  </div>
  <br>
  
</div>
&#13;
&#13;
&#13;

以上PDF对象代码我空了。请检查并告诉我如何在我的网页上显示PDF?

JSFIDDLE

1 个答案:

答案 0 :(得分:0)

经过一些谷歌搜索,我得到了解决方案。这是我的输出 -

&#13;
&#13;
var $scope;
angular.module('miniapp', ['phonecatFilters', 'ngSanitize']);

function Ctrl($scope) {
    $scope.test = 'Example from: ';
    $scope.file = {
        pdf: true,
        doc: true
    };
}
angular.module('phonecatFilters', []).filter('iconify', function ($sce) { // My custom filter
        return function (file) {
            return $sce.trustAsHtml('<object data="http://apps.deprigo.com/files/orders/1486031377-20022.pdf" type="application/pdf" width="100%" height="300"><embed src="http://apps.deprigo.com/files/orders/1486031377-20022.pdf" type="application/pdf" /></object>');
        }
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular-sanitize.min.js"></script>
<div ng-app="miniapp">
  <div ng-controller="Ctrl">
      <h1>{{test}}</h1>
      <div>Preview PDF:<br /><span ng-bind-html='file.pdf | iconify'></span>
      </div>
  </div>
  <br>
  
</div>
&#13;
&#13;
&#13;