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();
});

But it didn't work for me. It downloaded by the content of the file is not possible to open.
my back code:

var memory = new MemoryStream();
using (var stream = new FileStream(completeAddress, FileMode.Open))
{
stream.CopyTo(memory);
}
memory.Position = 0;
return new MediaOperationFileStreamViewModel()
{
MediaFileStream = new MediaFileStreamDto()
{
FileId = mediaInfo.Id,
FileName = mediaInfo.Name,
ContentType = Service.Helper.MimeType.GetContentType(completeAddress),
FileStream = memory
}
};
The result will return to controller. Below is my React code :

axios.create({
baseURL: 'https://localhost:44337/api',
timeout: 300000,
maxContentLength: 1073741824,
}).post('/MediaOperation/DownloadFileStream', {
"MediaFileId": item,
responseType: 'blob'
}).then(fileResult => {
const url = window.URL.createObjectURL(new Blob([fileResult.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', currentFileInfo.name);
document.body.appendChild(link);
link.click();
});

thank you so much..

This solution requires the entire downloaded file to fit into the browser's memory. Beyond a certain file size, it will either result in out of memory error, or just crash the browser. Terrible idea.

That is correct, what is the solution in this case?

pls help me, I already followed all of the tutorial,
the file has been downloaded but it cant be opened caused by corrupted or wrong extension,
what should I do to handle this case?

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!!!