How to save binary data of zip file in Javascript?

Question

I am getting below response from AJAX respose:

this is response of zip file. please let me know how to save this filename.zip in Javascript. Inside the ZIP there is PDF file.

MY code is like this:

$.ajax({

    url: baseURLDownload + "/service/report-builder/generateReportContentPDF",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
        xhr.responseType = 'arraybuffer'
    },
    type: "POST",
    data: JSON.stringify(parameter),
    contentType: "application/json",
    success: function(result) {
        console.log("ssss->"+result);
        var base64String = utf8_to_b64(result);
        //window.open("data:application/zip;base64,"+base64String); // It will download pdf in zip
        var zip = new JSZip();
        zip.add("PDFReport.pdf", result);
        content = zip.generate();
        location.href="data:application/zip;base64," + content;
        $.mobile.loading('hide');

    },
    error: function(xhr){
        console.log("Request Status: " + xhr.status + " Status Text: " + xhr.statusText + " " + xhr.responseText);
        $.mobile.loading('hide');
        showAlert("Error occured. Unable to download Report", "Message", "OK");

    }
});

RESPOSE Console.log("ssss->"+result);

PK��Q��F��/crt_pdf_10204725.pdf��uX\M�8|p��݃�;w�@p �ܝBp��݂�;|C�ھ�w��=O��]]�%�N��#+�reup��Y��̉�J��3)� O��C��F�M�P�&��rA�@��7T.��z(%h��x�x0�0Z�-i��%q�e�M��i�"�c��-/��j��齔/ļL瞄�0� �� >�o��[��6 멆�n��s�$� �#>˘ '��wT�� 3�36DK�+�̓�t6 ��r��sA:��x�<>n��'U��RLqA+��ݺ�BM��:4ĞP�}��:�}ߣP��?F)�9-�W0��2�{x��#2v8N.$V�>X=/�+�c}��ּ�\y��\*�J\�� 90�T�L� 3p��*Sfj(��PWWz��O�s�9]&���iO|�9�;�5��ʘdW�cl% �%;��u��%[�5��Q]$��[L>��yXg�9��2+&,iFs�Q��u�.�E(�>W��+��M ؟E��i|��k�k�c蟴CcG�j��4s|x �F1�}��Y��,29�0M=-O��m\L��y��^On^��\��u��a��F9:zc�Sy�-�g��fu�n�C�T:{ ��4&/ ��LM9�98� �&Pnc�!��m�r�~��)74�04��0�0��M�~"��.ikjG��M�-

Please help me with the code how I can save this binary data as a file. This response I am getting. — Nishant Singh, Jun 30 '15 at 17:51

score 34 · Answer 1 · edited Feb 17 '16 at 14:03

34

Finally I got answer of my question:

Here is the code:

var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
        var blob = new Blob([xhr.response], {type: "octet/stream"});
        var fileName = "QCPReport.zip";
        saveAs(blob, fileName);
    }
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));

edited Feb 17 '16 at 14:03

Alessio Cantarella

5,077
3
27
34

answered Jul 01 '15 at 22:27

Nishant Singh

728
1
6
8

10

Thanks. `xhr.responseType = "arraybuffer";` is what I was missing. – ulab Dec 14 '16 at 15:54
Same here. Though, at least in my case (slightly different code), I needed to set type to "application/zip" instead. – Michael Zlatkovsky - Microsoft May 07 '17 at 23:57
Any help is appreciated. Similar problems https://stackoverflow.com/a/53274895/1257574 – Harvey Dent Nov 13 '18 at 06:17
Thanks It's a life saver, after trying so many things only this one worked – Dip Parmar Jul 25 '19 at 06:12
2

why not setting `xhr.responseType = "blob"` and just using the `xhr.response`? – Haibrayn González Jan 09 '20 at 01:47
in axios use `axios.get(url, {responseType: 'arraybuffer'})` – nlavr Feb 24 '23 at 13:55

Be Kind · Answer 2 · 2022-02-03T14:21:51.647

15

Axios implementation:

const url = 'https://www.example.com/download-zip'

// Payload, eg list of docs to zip
const payload = { documents: ['id1', 'id2', 'id3'] }

// Axios options
const axiosOptions = {
  responseType: 'arraybuffer',
  headers: {
    'Content-Type': 'application/json'
  }
}

// Fetch data and save file
axios
  .post(url, payload, axiosOptions)
  .then((response) => {
    const blob = new Blob([response.data], {
      type: 'application/octet-stream'
    })
    const filename = 'download.zip'
    saveAs(blob, filename)
  })
  .catch((e) => {
    // Handle error
  })
})

Note

saveAs is a function from file-saver package I've been using to handle saving the file.

edited Feb 03 '22 at 14:21

answered Sep 17 '19 at 09:47

Be Kind

4,712
1
38
45

1

Where does the saveAs function come from? – Ashwin Feb 02 '22 at 16:39
1

@Ashwin Either helper function or a package implementation for saving the file. Most likely I was using `file-saver`: https://www.npmjs.com/package/file-saver – Be Kind Feb 03 '22 at 14:18
2

responseType: buffer very important – hafiz ali Dec 21 '22 at 21:40
this also works with GET, in case someone is wondering. POST is not a requirement. – Onur Çevik Apr 14 '23 at 10:51

score 13 · Answer 3 · answered Nov 21 '17 at 17:15

No dependancy.

Compatible with IE 10,11, Chrome, FF and Safari:

function str2bytes (str) {
   var bytes = new Uint8Array(str.length);
   for (var i=0; i<str.length; i++) {
      bytes[i] = str.charCodeAt(i);
    }
    return bytes;
}

var xhr = new XMLHttpRequest();
xhr.open("POST", baseURLDownload + "/service/report/QCPReport", true);
xhr.setRequestHeader("Content-type","application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // alert("Failed to download:" + xhr.status + "---" + xhr.statusText);
        var blob = new Blob([str2bytes(xhr.response)], {type: "application/zip"});
        var fileName = "QCPReport.zip";
        if (navigator.msSaveOrOpenBlob) {
            navigator.msSaveOrOpenBlob(blob, filename);
        } else {
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display:none";
            var url = window.URL.createObjectURL(blob);
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        }
    }
}
xhr.responseType = "arraybuffer";
xhr.send(JSON.stringify(QCPParameter));

This worked for me, thank you! I just had to remove the call to the `str2bytes` function. — Xar, Nov 05 '21 at 14:34

score 2 · Answer 4 · answered Jan 07 '19 at 17:41

2

For those of you using fetch, you can do this doing something like this.

fetch(url, config).
  .then((response) => {
    return response.arrayBuffer()
  })
  .then((data) => handleData(data))

In handleData, you will then instantiate the Blob object to handle the zip data.

answered Jan 07 '19 at 17:41

JackDev

4,891
1
39
48

Can you please expand the handleData function flow? How it should handle the instantiation of the blob to download? – Melwyn Jensen Apr 18 '22 at 20:38

score 0 · Answer 5 · answered Jan 22 '20 at 10:15

Here is my Answer you can avoid using blob and avoid using Filesaver.

This is how i wrote for one of my project using GET Method

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-type","application/json");
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");
xmlHttp.responseType= 'blob';

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        const downloadUrl = window.URL.createObjectURL(xmlHttp.response);
        const link = document.createElement('a');
        link.setAttribute('href', downloadUrl);
        link.setAttribute('download', `filename.zip`);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
    }
}
xmlHttp.responseType = "arraybuffer";
xmlHttp.send();

How to save binary data of zip file in Javascript?

5 Answers5

Note

Linked