Download a zip file in reactjs without any plugins

Question

I am getting a response from a rest api whose Content-Type is text/html and Content-Encoding is gzip.

I tried to download it using blob

const blob = new Blob([res], { type: 'application/gzip' });
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a'); 
a.href = downloadUrl;
document.body.appendChild(a);
a.click();

But the downloaded gz file was not able to open (seems to be corrupted). can some one help me with downloading zip file in reactjs.

Edit: require a solution without using any external plugins

You can use JsZip on Client Side – demkovych Feb 18 '20 at 12:27 — demkovych, Feb 18 '20 at 12:27

Deep Kakkar · Answer 1 · 2020-02-18T12:40:41.243

4

you can use jszip npm module.

For example:

var zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images"); //images is the folder which will be zip

img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"blob"}).then(function(content) {

    saveAs(content, "example.zip");
});

To use it without jszip, you can try the following code:

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

and its usage:

var blob = new Blob([str2bytes(myData)], {type: "application/zip"});
saveAs(blob, "data.zip");

But jszip is a better alternative approach.

edited Feb 18 '20 at 12:40

answered Feb 18 '20 at 12:29

Deep Kakkar

5,831
4
39
75

1

I dont want to use any external plugins in my application due to some reasons – qaz2625 qaz Feb 18 '20 at 12:34
oh I just seen you have updated your question. well you can check the link https://stackoverflow.com/questions/31127849/how-to-save-binary-data-of-zip-file-in-javascript – Deep Kakkar Feb 18 '20 at 12:38
jszip is no good for big files. Sometimes it returns empty files. – Manny Alvarado Mar 16 '22 at 22:42
so @MannyAlvarado that's why you downvoted? In actuality on SO, the answer depends on the OP requirement. – Deep Kakkar Mar 17 '22 at 04:53

Download a zip file in reactjs without any plugins

1 Answers1