Write Byte Array to a file JavaScript

Question

I have Java REST webservice that returns documents as byte array, I need to write JavaScript code to get the webservice's response and write it to a file in order to download that file as PDF Kindly see a screen shot of the webservice's response and see my sample code this code downloads a corrupted PDF file.

var data = new FormData();
data.append('PARAM1', 'Value1');
data.append('PARAM2', 'Value2');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'SERVICEURL');
xhr.withCredentials = true;
xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
xhr.onload = function() {
    
    console.log('Response text = ' + xhr.responseText);
    console.log('Returned status = ' + xhr.status);
    
    
    var arr = [];
    arr.push(xhr.responseText);

    var byteArray = new Uint8Array(arr);
    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(new Blob(byteArray, { type: 'application/octet-stream' }));
    a.download = "tst.pdf";
    // Append anchor to body.
    document.body.appendChild(a)
    a.click();
    // Remove anchor from body
    document.body.removeChild(a)
    
};
xhr.send(data);

Vinay · Accepted Answer · 2022-08-30 02:54:55Z

4

Since you are requesting a binary file you need to tell XHR about that otherwise it will use the default "text" (UTF-8) encoding that will interpret pdf as text and will mess up the encoding. Just assign responseType property a value of 'blob' or the MIME type of pdf

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; // tell XHR that the response will be a pdf file

// OR xhr.responseType = 'application/pdf'; if above doesn't work

And you will access it using response property and not responseText. So you will use arr.push(xhr.response); and it will return you a Blob.

If this doesn't work, inform me will update another solution.

Update:

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; // tell XHR that the response will be a pdf file
xhr.onload = function() {
    var blob = this.response;
    var a = window.document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = "tst.pdf";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
};

edited Aug 30, 2022 at 2:54

answered Sep 2, 2018 at 7:55

Vinay

7,7247 gold badges28 silver badges49 bronze badges

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

8 Comments

user1814595 Over a year ago

Hi Viney thanks for help I've tried your idea but I received the following error "The provided value 'application/pdf' is not a valid enum value of type XMLHttpRequestResponseType"

Vinay Over a year ago

Are fetching just one pdf or multiple?

user1814595 Over a year ago

just one document

user1814595 Over a year ago

Thanks It is working using your sample code, thanks very much

Vinay Over a year ago

Cool..that was nothing.

|

Collectives™ on Stack Overflow

Write Byte Array to a file JavaScript

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related