I am trying to display a PDF preview on my website using the following code:
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 () {
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>The above code for displaying a PDF object is not working for me. Can someone please help me troubleshoot and figure out how to show the PDF on my webpage?