Download Binary Data as a File Via Javascript

Question

I'm making an ajax call to an API that returns binary data. I'm wondering if its possible to take that binary data and display it for the client in a new window? This is what I'm doing right now. The problem is, the document opens up, but its completely blank.

$.ajax({
    type: "POST",
    url: apiURL,
    data: xmlRequest,
    complete: function(xhr, status) {
        var bb = new window.WebKitBlobBuilder();

        // Append the binary data to the blob
        bb.append(xhr.responseText);

        var blobURL = window.webkitURL.createObjectURL(bb.getBlob('application/pdf'));
        window.open(blobURL);
    }
});

Any ideas?

Are you using HTTPS with IE? If so, see stackoverflow.com/questions/773308/… — Zack Marrapese
– Zack Marrapese, Commented Mar 8, 2012 at 15:50

Anton · Accepted Answer · 2012-03-10 17:23:43Z

9

Okay, I figured it out. I had to specify the responseType as 'array buffer':

function downloadPDF() {

    var xhr = new XMLHttpRequest();
    xhr.open('POST', API_URL, true);
    xhr.responseType = 'arraybuffer';

    xhr.onload = function(e) {
        if (this.status == 200) {
            var bb = new window.WebKitBlobBuilder();
            bb.append(this.response); // Note: not xhr.responseText

            var blob = bb.getBlob('application/pdf');
            var blobURL = window.webkitURL.createObjectURL(blob);

            window.open(blobURL);
        }
    };

    xhr.send(createRequest());
}

answered Mar 10, 2012 at 17:23

Anton

1,4472 gold badges18 silver badges30 bronze badges

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

5 Comments

Greg Over a year ago

How do you change the downloaded file name using this method?

davyzhang Over a year ago

using FileSaver will make this easier stackoverflow.com/questions/15211742/…

Kishore Jv Over a year ago

I am gettign this error when included xhr.responseType

ERROR DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'arraybuffer').     at XMLHttpRequest.x.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (http://localhost:4200/main.js:11702:31)

Nikhil VJ Over a year ago

what's the createRequest() for?

Nikhil VJ Over a year ago

after removing createRequest(), getting this error: Uncaught TypeError: window.WebKitBlobBuilder is not a constructor

Collectives™ on Stack Overflow

Download Binary Data as a File Via Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related