Download Binary Data as a File Via Javascript

19,128

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());
}
Share:
19,128
Matthew
Author by

Matthew

I'm a developer at FreshBooks

Updated on August 09, 2022

Comments

  • Matthew
    Matthew over 1 year

    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?