How to download files using axios

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?

Solution

When response comes with a downloadable file, response headers will be something like:

{
  "Content-Disposition": "attachment;filename=report.xls"
  "Content-Type": "application/octet-stream" // or "application/vnd.ms-excel"
}

What you can do is create a separate component, which will contain a hidden iframe.

import * as React from 'react';

var MyIframe = React.createClass({
 
   render: function() {
       return (
         <div style={{display: 'none'}}>
             <iframe src={this.props.iframeSrc} />
         </div>
       );
   }
});

Now, you can pass the url of the downloadable file as prop to this component. So when this component will receive prop, it will re-render and file will be downloaded.

Edit: You can also use js-file-download module. Link to Github repo

const FileDownload = require('js-file-download');

Axios({
  url: 'http://localhost/downloadFile',
  method: 'GET',
  responseType: 'blob', // Important
}).then((response) => {
    FileDownload(response.data, 'report.csv');
});