Downloading Files with Axios

In this tutorial, we will explore how to download files using Axios, a popular JavaScript library for making HTTP requests. We will cover the basics of downloading files, including setting the response type, creating a blob, and triggering a file download.

Introduction to Downloading Files with Axios

Axios provides an easy way to make HTTP requests in JavaScript. When it comes to downloading files, we need to specify the responseType as 'blob' or 'arraybuffer'. This tells Axios to treat the response data as a binary blob, which can be used to create a file.

Setting up the Request

To download a file using Axios, you need to make a GET request with the responseType set to 'blob'. Here is an example:

axios({
  url: 'http://api.dev/file-download',
  method: 'GET',
  responseType: 'blob'
})

Creating a Blob and Triggering a File Download

Once we have received the response data, we need to create a blob and trigger a file download. We can do this using the URL.createObjectURL() method:

axios({
  url: 'http://api.dev/file-download',
  method: 'GET',
  responseType: 'blob'
}).then((response) => {
  const href = URL.createObjectURL(response.data);
  const link = document.createElement('a');
  link.href = href;
  link.setAttribute('download', 'file.pdf'); // or any other extension
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(href);
});

In this example, we create a blob from the response data and then create an anchor element with the href attribute set to the blob URL. We then append the anchor element to the body of the document, click on it, and finally remove the anchor element and revoke the object URL.

Handling IE Browsers

For Internet Explorer browsers, we need to use the window.navigator.msSaveOrOpenBlob() method instead:

axios.post('/yourUrl', data, { responseType: 'blob' })
  .then((response) => {
    let fileName = response.headers["content-disposition"].split("filename=")[1];
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE variant
      window.navigator.msSaveOrOpenBlob(new Blob([response.data],
          { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
        ),
        fileName
      );
    } else {
      const url = window.URL.createObjectURL(new Blob([response.data],
          { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download',
        response.headers["content-disposition"].split("filename=")[1]);
      document.body.appendChild(link);
      link.click();
    }
  });

Server-Side Configuration

For the server-side configuration, we need to set the Content-Disposition header with the filename and type:

response.contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
response.addHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=exceptions.xlsx");

Conclusion

In this tutorial, we have covered how to download files using Axios. We have explored the basics of downloading files, including setting the response type, creating a blob, and triggering a file download. We have also handled IE browsers and provided an example of server-side configuration.

By following these steps, you should be able to download files using Axios in your JavaScript applications.