axios-download.js

/*
Source code from this gist: https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
Thanks also and other contributors with their comments.

https://medium.com/@drevets/you-cant-prompt-a-file-download-with-the-content-disposition-header-using-axios-xhr-sorry-56577aa706d6
https://stackoverflow.com/questions/41938718/how-to-download-files-using-axios
*/


/************************ 
From @javilobo8 
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743
*/
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();
});

/************************ 
From @steveclarke 
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743?permalink_comment_id=3055950#gistcomment-3055950
*/
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();
});

/************************ 
/* From @sergiop
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743?permalink_comment_id=3901594#gistcomment-3901594

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

/************************ 
From @LimmaPaulus 
https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743?permalink_comment_id=2677506#gistcomment-2677506
to set type of file and filename from "content-disposition" -header
*/
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);