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 http://stackoverflow.com/questions/773308/ie-https-generating-pdf-from-php-file-doesnt-work — Zack Marrapese, Mar 08 '12 at 15:50

score 9 · Accepted Answer · answered Mar 10 '12 at 17:23

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 '12 at 17:23

Anton

1,387
2
17
30

How do you change the downloaded file name using this method? – Greg Sep 23 '12 at 21:40
1

using FileSaver will make this easier http://stackoverflow.com/questions/15211742/html5-saveas-support-in-google-chrome – davyzhang Mar 21 '15 at 10:03
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)` – Kishore Jv Mar 30 '20 at 08:43
what's the `createRequest()` for? – Nikhil VJ Nov 14 '20 at 17:39
after removing `createRequest()`, getting this error: `Uncaught TypeError: window.WebKitBlobBuilder is not a constructor` – Nikhil VJ Nov 14 '20 at 17:43

Download Binary Data as a File Via Javascript

1 Answers1

Linked