How to download files using axios

axios
David Choi picture David Choi · Jan 30, 2017 · Viewed 213.9k times · Source

I am using axios for basic http requests like GET and POST, and it works well. Now I need to be able to download Excel files too. Is this possible with axios? If so does anyone have some sample code? If not, what else can I use in a React application to do the same?

Answer

Viney picture Viney · Nov 9, 2018

A more general solution

axios({
  url: 'http://api.dev/file-download', //your url
  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'); //or any other extension
   document.body.appendChild(link);
   link.click();
});

Check out the quirks at https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743

Full credits to: https://gist.github.com/javilobo8

Related questions

axios post request to send form data

axios POST request is hitting the url on the controller but setting null values to my POJO class, when I go through developer tools in chrome, the payload contains data. What am I doing wrong? Axios POST Request: var body = { …

Read More
How to set header and options in axios?

I use Axios to perform an HTTP post like this: import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers) Is this correct? Or should I do: axios.post(url, params: …

Read More
Passing headers with axios POST request

I have written an axios POST request as recommended from the npm package documentation like: var data = { 'key1': 'val1', 'key2': 'val2' } axios.post(Helper.getUserAPI(), data) .then((response) => { dispatch({type: FOUND_USER, data: response.data[0]}) }) .…

Read More