Angularjs Code to display Pdf file in google chrome is not working but working for firefox

Question

Below code to display Pdf file in google chrome is not working but working in firefox.

HTML View

<div>
    <object ng-bind="pdfcontent" data="{{pdfcontent}}" type="application/pdf" width="100%" height="800px">
    </object>
</div>

Angularjs Code

$http.get('/myurl/', {responseType: 'arraybuffer'})
    .success(function (data) {
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    $scope.pdfcontent = $sce.trustAsResourceUrl(fileURL);
});

I am getting below two errors

firebug-lite.js:18877 Uncaught InvalidStateError: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').(anonymous function) @ firebug-lite.js:18877

jquery.js:2812 GET http://abc123.com/%7B%7Bpdfcontent%7D%7D 404 (Not Found)

What is wrong in my code, how to to fix this, any help is appreciated. Thanks.

Answer 1

you problem is that the data attribute is binded once the object is been been rendered and therefore when your request response the pdfcontent isn't been binded

to solve this you can do two think

1. using a directive for this purpose like in this answer
2. you can use an if statement like in the snippet below

    $scope.downloaded = false
    $http.get('/myurl/', {responseType: 'arraybuffer'}).success(function (data) {
            $scope.downloaded = true
            var file = new Blob([data], {type: 'application/pdf'});
            var fileURL = URL.createObjectURL(file);
            $scope.pdfcontent = $sce.trustAsResourceUrl(fileURL);
        });

    <div ng-if="downloaded">
        <object ng-bind="pdfcontent" data="{{pdfcontent}}" type="application/pdf" width="100%" height="800px">
        </object>
    </div>