AngularJS PDF预览过滤器不起作用

Question

我想在我的网页中预览 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>';
        }
    });

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

在 PDF 对象代码上方我是空的。请检查并告诉我如何在我的网页中显示 PDF？

JSFIDDLE

Answer 1

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

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>');
        }
    });

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