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

Can someone please help, This code is not working for me and not showing any error also?

const download = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  
    const ImageResult = `
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'><rect fill='#ff7700' width='1600' height='900'/><polygon fill='#cc0000' points='957 450 539 900 1396 900'/><polygon fill='#aa0000' points='957 450 872.9 900 1396 900'/><polygon fill='#d6002b' points='-60 900 398 662 816 900'/><polygon fill='#b10022' points='337 900 398 662 816 900'/><polygon fill='#d9004b' points='1203 546 1552 900 876 900'/><polygon fill='#b2003d' points='1203 546 1552 900 1162 900'/><polygon fill='#d3006c' points='641 695 886 900 367 900'/><polygon fill='#ac0057' points='587 900 641 695 886 900'/><polygon fill='#c4008c' points='1710 900 1401 632 1096 900'/><polygon fill='#9e0071' points='1710 900 1401 632 1365 900'/><polygon fill='#aa00aa' points='1210 900 971 687 725 900'/><polygon fill='#880088' points='943 900 1210 900 971 687'/></svg>
    `;

    if (ImageResult) {
      try {
        const element = document.createElement("a");
        const blob = new Blob([ImageResult], { type: "image/svg+xml" });
        element.href = window.URL.createObjectURL(blob);
        element.download = "myFile.svg";
        document.body.appendChild(element);
        element.click();
        element.remove();
        
      } catch (e) {
        console.log(e);
      }
    }
  };

Duuudeeee that bbangss <3 love you !! you saved my night !

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