Javascript: Open PDF in new tab from byte array

Question

I'm using AngularJS with an HTTP resource to call an external API and my response is a byte array. I need to turn this byte array into a PDF in a new window. I haven't seen any very good solutions on here that work cross browser or that are pure javascript. Is there a way to do this?

Here is my code:

Javascript

Document.preview({id: $scope.order.id}, function(data){

    // Open PDF Here
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);

});

I've been looking at that, but I don't see any good examples using a byte array. I've also been looking at stackoverflow.com/questions/21628378/… but I'm just getting an error "Failed to load PDF Document" — Jeremy Wagner
– Jeremy Wagner, Commented Jan 28, 2015 at 16:32
Are there any proprietary plugins or anything to do this? Several pages open pdf's, how can I? — Jeremy Wagner
– Jeremy Wagner, Commented Jan 29, 2015 at 15:29

aniltilanthe · Accepted Answer · 2020-01-06 15:32:00Z

27

You would need to pass the responseType in your service call

$http.post('/Service-URL', dataTO, {responseType: 'arraybuffer'});

then in the success of your data call this should open up pdf in a new window:-

    getDocument()
        .success(function(data) {
            var file = new Blob([data], { type: 'application/pdf' });
            var fileURL = URL.createObjectURL(file);
            window.open(fileURL);
    })

From this answer :- https://stackoverflow.com/a/21730535/3645957 by https://stackoverflow.com/users/2688545/michael

edited Jan 6, 2020 at 15:32

answered Sep 7, 2016 at 12:41

aniltilanthe

5,3151 gold badge20 silver badges18 bronze badges

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

2 Comments

aniltilanthe Over a year ago

@ihodonald It is an Optional attribute 'name'. It was a typo in the answer. But it is optional, so not necessary. like from here w3schools.com/jsref/met_win_open.asp -> i removed it from the answer.

Sérgio Danilo Over a year ago

Dude, this thing: {responseType: 'arraybuffer'} save my life. Thank you very much! 😊

Gonnarule · Accepted Answer · 2016-02-22 09:53:14Z

18

If anyone still looks for that, here is what I'm doing (and working) :

var pdfAsDataUri = "data:application/pdf;base64,"+byteArray;
window.open(pdfAsDataUri);

Where byteArray is the data you receive. It's maybe not a nice solution (byte array is visible in the URL), but it works...

answered Feb 22, 2016 at 9:53

Gonnarule

3502 silver badges7 bronze badges

4 Comments

deusprogrammer Over a year ago

Data URI's don't work on all browsers. Especially even recent versions of IE.

Sajjad Ali Khan Over a year ago

now chrome v60 not allowing to open file from byteArray using window.open , it has depreciated in chrome v60

Mahmoud Hboubati Over a year ago

tried with v94 and it worked

firstpostcommenter Over a year ago

Nice. works with Chrome 108 version. I need to quickly verify a bytearray and this method is useful

Collectives™ on Stack Overflow

Javascript: Open PDF in new tab from byte array

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related