you can use jszip link https://github.com/Stuk/jszip like

import zipTargetFiles from '/path'

zipTargetFiles( data ).then(file => {
 //operations
})

if you use fetch like this.

fetch('URL', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    //Body
  })
}).then((response)=>{
//here is youu want zip data 
var zip = new JSZip();
var zipData = response.data // 
// Add an top-level, arbitrary text file with contents
zip.file("response.txt", zipData);

// Generate the zip file asynchronously
zip.generateAsync({type:"blob"})
.then(function(content) {
    // Force down of the Zip file
    saveAs(content, "zipFile.zip");
});

}).catch((error)=>{
console.log(error)
})

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.

I've arrived late, but hope to help someone.

It is really important to set responseType as 'arraybuffer' in the api call, like this:

...
export const getZip = async (id) => {
   const { data } = await axios.get(
      "/sypa-applications/export",
      {
        id
      },
      { responseType: "arraybuffer" } 
      );

   return data;
 }
 ...

Then you can download the ZIP from both ways:

1.- Using file-saver npm dependency:

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

2.- Using DOM:

const url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" });
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "fileName.zip");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);

I couldn't download the ZIP until I set the responseType param to "arraybuffer" in the GET request.

Best regard, Alberto.

What I wanted:

• send files of any formats from the back-end to the front-end

My tools:

• axios, express, saveAs

The problem I faced with:

• Unable to download zip file using axios
• https://github.com/eligrey/FileSaver.js/issues/156
• https://github.com/axios/axios/issues/448

Nothing helped me, probably because I did something wrong. But here is a simple and quick solution that I came up with:

//BE
const filename = "my-file-name.json";

const zip = new AdmZip();
zip.addFile(filename, body);
const content = zip.toBuffer();

res.set({
            "Content-Length": Buffer.byteLength(content), //I'm not sure if this is necessary, but it's better to let it be :-)
            "Content-Type": "text/plain",
            "Content-Disposition": `attachment; filename=${filename}.${format}`,
          });
res.status(200).send(content.toString("hex")); //my solution to the problem

//FE
const { headers, data } = await axios.post(myEndpoint);
const headerLine = headers["content-disposition"];
const filename = headerLine.replace(/[\w; ]+filename=/g, "");

const content = Buffer.from(data, "hex");
const blob = new Blob([content], { type: "application/zip" });
saveAs(blob, filename); //file-saver npm package

You can use JsZip on Client Side. For example, if you want to download an image, you need its url. Then, do a request with axios. Like this:

request = (currentUrl: string): Promise<void> => axios({
    url: currentUrl,
    method: 'GET',
    responseType: 'blob',
}).then((response) => {
    const url: string = window.URL.createObjectURL(new Blob([response.data]));
});

then use the url that axios gave you in response to download your file

Please try adding {responseType: 'arraybuffer'}. I also had the same problem but after adding this {responseType: 'arraybuffer'}. I am getting correct file.

 downloadZip = async () => {
        const params = {
            profile: this.state.profileName,
            year: this.state.year,
        };
        axios.post(
              `${serverUrl}/download_zip`,
              params,
              {
                  responseType: 'arraybuffer'
              }
        ).then(
            (res) => {
                const url = window.URL.createObjectURL(new Blob([res.data],{type:'application/zip'}));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.zip');
                document.body.appendChild(link);
                link.click();
                link.parentNode.removeChild(link);
            },
            (error) => {
                console.log(error);
            });
        }

There is some strategies to resolve it, all browser when you redirect to URL where extension ending with .zip, normally start downloading. What you can do is to return to your client the path for download something like that.

http://api.site.com.br/my-file.zip

and then you can use:

window.open('URL here','_blank')