axios

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