Skip to content

Instantly share code, notes, and snippets.

@javilobo8
Last active March 15, 2024 02:25
Show Gist options
  • Save javilobo8/097c30a233786be52070986d8cdb1743 to your computer and use it in GitHub Desktop.
Save javilobo8/097c30a233786be52070986d8cdb1743 to your computer and use it in GitHub Desktop.
Download files with AJAX (axios)
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();
});
@ggeser
Copy link

ggeser commented Oct 20, 2021

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

@rbalink
Copy link

rbalink commented Nov 24, 2021

Thanks a lot !

@ZaffranLe
Copy link

Many thanks, you saved my day

@lusuee
Copy link

lusuee commented Jan 4, 2022

Thanks

@andela-mallan
Copy link

Bless you!!!

@ilKhr
Copy link

ilKhr commented Jan 30, 2022

Thank you!

@cambur
Copy link

cambur commented Mar 30, 2022

This is the fix I've been looking for everywhere

@akshatz
Copy link

akshatz commented Jun 10, 2022

Thanks for the solution.

@taofiq-tradelia
Copy link

Thanks for the solution 🥲

@AndresCG2019
Copy link

AndresCG2019 commented Aug 31, 2022

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

@HighTide2020
Copy link

Thanks for the easy snippet & example 🤖

@sdroger
Copy link

sdroger commented Jan 10, 2023

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

@Neptunium1129
Copy link

how to progress download?

@Luiyit
Copy link

Luiyit commented Jan 18, 2023

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

@MustaqueemPathan
Copy link

Thank you bro

@myungwoo-Y
Copy link

Thank you for great solution!

@Amberevol
Copy link

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.

@nurhamsah1998
Copy link

thanks

@rr-cory-hartford
Copy link

This is great. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment