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?

Brandtr

Are you using HTTPS with IE? If so, see #773808 – Apologetic

Its a chrome extension, so I don't have to worry about IE. – Brandtr

do you have control of the server side implementation? – Ottava

Answer 1

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());
}

Brandtr

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

using FileSaver will make this easier #15212242 – Milt

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) – Coffeecolored

what's the createRequest() for? – Deprivation

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