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.

Community · Accepted Answer · 2017-05-23 10:28:11Z

0

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

using a directive for this purpose like in this answer
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>

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 2, 2016 at 13:32

Zamboney

2,00712 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zamboney Over a year ago

is the url valid (you can open it in the browser)?

GRESPL Nagpur Over a year ago

Yes Url is valid and correct , its working in firefox.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related