Download files with AJAX (axios)

download-file.js

axios({
  url: 'http://localhost:5000/static/example.pdf',
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  link.click();
  window.URL.revokeObjectURL(url);
});

Thank you!

Thanks. But how can I download any file from a full url using axios?

If you'd prefer to have the document open in another tab inline use the following.

The important part is removing the download attribute and adding the type option when creating the Blob.

axios({
  url: 'http://localhost:5000/static/example.pdf',
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank'
  link.click();
  window.URL.revokeObjectURL(url);
});

To reuse the file name from content-disposition header:

    link.setAttribute('download', response.headers["content-disposition"].split("filename=")[1])

Don't forget about adding content-disposition to Access-Control-Expose-Headers when CORS rules apply.