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');
  document.body.appendChild(link);
  link.click();
});

Thanks a lot! To set type of file and filename from "content-disposition" -header you can use this:

const blob = new Blob([response.data], {type: response.data.type});
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
const contentDisposition = response.headers['content-disposition'];
let fileName = 'unknown';
if (contentDisposition) {
    const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
    if (fileNameMatch.length === 2)
        fileName = fileNameMatch[1];
}
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);

getting filename from content-disposition header worked like a charm.. good cleanup at the end as well.

Thanks @LimmaPaulus for https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743#gistcomment-2677506

700th star done :3

Using responseType: 'blob' Axios returns a blob, you don't need to convert it into a blob again.

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

And using FileSaver you can save some lines of code increasing the browsers compatibility:

import { saveAs } from 'file-saver'

axios({
  url: 'http://localhost:5000/static/example.pdf',
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  saveAs(response.data, 'file.pdf');
});

Adding

headers: { 'Accept': 'application/vnd.ms-excel' } Is helpful in download .xlsx files.

been struggling for a while to work with excel file, adding this to my headers solved the problem. thanks a lot!!

Thank you very much. I was struggling for 3 days.

Thank you very much. If i not met this solution still searching thank you very much

Очень здорово! Спасибо большое!

Thanks a lot !

Many thanks, you saved my day

Thanks

Bless you!!!

Thank you!

This is the fix I've been looking for everywhere

Thanks for the solution.

Thanks for the solution 🥲

in a c# rest api what should my endpoint return for axios to take it as a valid "Blob"?

Thanks for the easy snippet & example 🤖

Thank you, saved my day!!! S2
it worked perfectly with vue.js

how to progress download?

how to progress download?
Maybe the Axios option onDownloadProgress or this package axios-progress-bar can help you

Thank you bro

Thank you for great solution!

How to do it in react-native?
try { const response = await axios.get(homeService.downloadPlan, { headers: { Authorization:Bearer ${idToken}`,
hospitalId: arg.hospitalId,
},
params,
responseType: 'blob',
});

  // Save the PDF file to the device's storage
  const { dirs } = RNFetchBlob.fs;
  console.log('RN', dirs.DownloadDir);
  // file name
  const pdfFileName = `${arg.code}_${arg.plan}.pdf`;
  const fileUri = `${dirs.DownloadDir}/${pdfFileName}`;
  const pdfData = response.data;
  console.log('response ', pdfData);
  try {
     await RNFS.writeFile(fileUri, pdfData);
    console.log('Saved at :', fileUri);
  } catch (error) {
    console.log('Error saving file:', error);
  }
  return response;
} catch (error) {
  throw new Error('API Error');
}`
above code saves the file as pdf with 8 blank pages size of file and no of pages are correct.

thanks

This is great. Thanks

Using responseType: 'blob' Axios returns a blob, you don't need to convert it into a blob again.

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

And using FileSaver you can save some lines of code increasing the browsers compatibility:

import { saveAs } from 'file-saver'

axios({
  url: 'http://localhost:5000/static/example.pdf',
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  saveAs(response.data, 'file.pdf');
});

Asking axios to return a blob instead of returning text and building a blob saved me days of banging my head on the desk.
Was constantly seeing corrupted data and couldn't figure out why. The file-saver package made my code a ton cleaner as well.

Thank you so, so much @sergiop!!!