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

Try this:

  .post(`/api/folders/${folderDetails.id}/download`, {
      resources: ids
    }, {responseType: 'blob'})
    .then(({data: blob}) => {
      const link = document.createElement('a');
      const url = URL.createObjectURL(blob);
      console.log(url);
      link.href = url;
      link.download = 'myfile.zip';
      link.click();
    });

1. Download the file with Axios as a responseType: 'blob'
2. Create a file link using the blob in the response from Axios/Server
3. Create <a> HTML element with a the href linked to the file link created in step 2 & click the link
4. Clean up the dynamically created file link and HTML element

axios({
    url: 'http://api.dev/file-download', //your url
    method: 'GET',
    responseType: 'blob', // important
}).then((response) => {
    // create file link in browser's memory
    const href = URL.createObjectURL(response.data);

    // create "a" HTML element with href to file & click
    const link = document.createElement('a');
    link.href = href;
    link.setAttribute('download', 'file.pdf'); //or any other extension
    document.body.appendChild(link);
    link.click();

    // clean up "a" element & remove ObjectURL
    document.body.removeChild(link);
    URL.revokeObjectURL(href);
});

Check out the quirks at https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

Full credits to: https://gist.github.com/javilobo8

More documentation for URL.createObjectURL is available on MDN. It's critical to release the object with URL.revokeObjectURL to prevent a memory leak. In the function above, since we've already downloaded the file, we can immediately revoke the object.

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL() when you no longer need them.

Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.

You can try adding responseType as arraybuffer

axios.get(
   fileUrl,
   {headers:{'X-API-TOKEN':xxxxx}, responseType: 'arraybuffer'}
);

To add to btbam91's reply: responseType has to be part of the config. In the above example:

 axios
    .post('http://0.0.0.0:8000/sheets/', data,
        {
            responseType: 'arraybuffer',
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        })