How to download files using axios

Question

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

User · Answer

It s very simple javascript code to trigger a download for the user  window open  quot  lt insert URL here gt  quot    You don t want need axios for this operation  it should be standard to just let the browser do it s thing  Note  If you need authorisation for the download then this might not work  I m pretty sure you can use cookies to authorise a request like this  provided it s within the same domain  but regardless  this might not work immediately in such a case   As for whether it s possible    not with the in-built file downloading mechanism  no

User · Answer

A more general solution  axios     url   http   api dev file-download     your url   method   GET     responseType   blob      important    then  response    gt       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

User · Answer

Downloading Files  using Axios and Security   This is actually even more complex when you want to download files using Axios and some means of security  To prevent anyone else from spending too much time in figuring this out  let me walk you through this   You need to do 3 things   1  Configure your server to permit the browser to see required HTTP headers 2  Implement the server-side service  and making it advertise the correct file type for the downloaded file  3  Implementing an Axios handler to trigger a FileDownload dialog within the browser   These steps are mostly doable - but are complicated considerably by the browser s relation to CORS  One step at a time   1  Configure your  HTTP  server  When employing transport security  JavaScript executing within a browser can  by design   access only 6 of the HTTP headers actually sent by the HTTP server  If we would like the server to suggest a filename for the download  we must inform the browser that it is  OK  for JavaScript to be granted access to other headers where suggested filename would be transported   Let us assume - for the sake of discussion - that we want the server to transmit the suggested filename within a HTTP header called X-Suggested-Filename  The HTTP server tells the browser that it is OK to expose this received custom header to the JavaScript Axios with the following header   Access-Control-Expose-Headers  X-Suggested-Filename   The exact way to configure your HTTP server to set this header varies from product to product       See https   developer mozilla org en-US docs Web HTTP Headers Access-Control-Expose-Headers for full explanation and detailed description of these standard headers      2  Implement the server-side service  Your server-side service implementation must now perform 2 things   1  Create the  binary  document and assign correct ContentType to the response 2  Assign the custom header  X-Suggested-Filename  containing the suggested file name for the client   This is done in different ways depending on your chosen technology stack  I will sketch an example using the JavaEE 7 standard which should emit an Excel report    GET  Path   report excel    Produces  application vnd ms-excel   public Response getAllergyAndPreferencesReport             Create the document which should be downloaded     final byte   theDocumentData                 Define a suggested filename     final String filename                Create the JAXRS response        Don t forget to include the filename in 2 HTTP headers                 a  The standard  Content-Disposition  one  and        b  The custom  X-Suggested-Filename               final Response ResponseBuilder builder   Response ok              theDocumentData   application vnd ms-excel                header  X-Suggested-Filename   fileName       builder header  Content-Disposition    attachment  filename     fileName           All Done      return builder build        The service now emits the binary document  an Excel report  in this case   sets the correct content type - and also sends a custom HTTP header containing the suggested filename to use when saving the document   3  Implement an Axios handler for the Received document  There are a few pitfalls here  so let s ensure all details are correctly configured    The service responds to  GET  i e  HTTP GET   so the axios call must be  axios get        The document is transmitted as a stream of bytes  so you must tell axios to treat the response as an HTML5 Blob   I e  responseType   blob    In this case  the file-saver JavaScript library is used to pop the browser dialog open  However  you could chose another     The skeleton Axios implementation would then be something along the lines of       Fetch the dynamically generated excel document from the server   axios get resource   responseType   blob    then  response    gt            Log somewhat to show that the browser actually exposes the custom HTTP header     const fileNameHeader    x-suggested-filename       const suggestedFileName   response headers fileNameHeader        const effectiveFileName    suggestedFileName     undefined                    allergierOchPreferenser xls                    suggestedFileName       console log  Received header      fileNameHeader           suggestedFileName                      effective fileName      effectiveFileName           Let the user save the file      FileSaver saveAs response data  effectiveFileName           catch  response    gt            console error  Could not Download the Excel report from the backend    response

User · Answer

The function to make the API call with axios      function getFileToDownload  apiUrl         return axios get apiUrl           responseType   arraybuffer          headers              Content-Type    application json                            Call the function and then download the excel file you get    getFileToDownload  putApiUrlHere      then  response   gt          const type   response headers  content-type         const blob   new Blob  response data     type  type  encoding   UTF-8           const link   document createElement  a         link href   window URL createObjectURL blob        link download    file xlsx        link click

User · Answer

The trick is to make an invisible anchor tag in the render   and add a React ref allowing to trigger a click once we have the axios response   class Example extends Component       state             ref  React createRef              exportCSV        gt            axios get                app export            then response   gt                let blob   new Blob  response data    type   application octet-stream                let ref   this state ref             ref current href   URL createObjectURL blob              ref current download    data csv              ref current click                         render            return               lt div gt                   lt a style   display   none    href  empty  ref  this state ref  gt ref lt  a gt                   lt button onClick  this exportCSV  gt Export CSV lt  button gt               lt  div gt                      Here is the documentation  https   reactjs org docs refs-and-the-dom html  You can find a similar idea here  https   thewebtier com snippets download-files-with-axios

User · Answer

When response comes with a downloadable file  response headers will be something like Content-Disposition   quot attachment filename report xls quot  Content-Type   quot application octet-stream quot     or Content-type   quot application vnd ms-excel quot   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               lt div style   display   none    gt                  lt iframe src  this props iframeSrc    gt              lt  div gt                            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    gt        FileDownload response data   report csv         Hope this helps

User · Answer

This Worked for me  i implemented this solution in reactJS const requestOptions     enter code here  method   GET   headers     Content-Type    application json        fetch    url    requestOptions   then  res    gt        return res blob        then  blob    gt        const href   window URL createObjectURL blob       const link   document createElement  a        link href   href      link setAttribute  download    config json      or any other extension     document body appendChild link       link click        catch  err    gt        return Promise reject   Error   Something Went Wrong   err

User · Answer

My answer is a total hack- I just created a link that looks like a button and add the URL to that    lt a class  el-button    style  color  white  background-color   58B7FF      href   lt YOUR URL ENDPOINT HERE gt      download   lt FILE NAME NERE gt   gt   lt i class  fa fa-file-excel-o  gt  lt  i gt  amp nbsp Excel  lt  a gt    I m using the excellent VueJs hence the odd anotations  however  this solution is framework agnostic  The idea would work for any HTML based design

User · Answer

For axios POST request  the request should be something like this  The key here is that the responseType and header fields must be in the 3rd parameter of Post  The 2nd parameter is the application parameters   export const requestDownloadReport    requestParams    gt  async dispatch   gt       let response   null    try       response   await frontEndApi post  createPdf           requestParams  requestParams                     responseType   arraybuffer      important   because we need to convert it to a blob  If we don t specify this  response data will be the raw data  It cannot be converted to blob directly        headers               Content-Type    application json              Accept    application pdf                                catch err        console log   requestDownloadReport  ERROR    err       return err        return response

User · Answer

axios get                app export            then response   gt                    const url   window URL createObjectURL new Blob  response                 const link   document createElement  a                link href   url              const fileName        new Date    csv    whatever your file name               link setAttribute  download   fileName               document body appendChild link               link click                link remove      you need to remove that elelment which is created before

User · Answer

Axios post solution with IE and other browsers I ve found some incredible solutions here  But they frequently don t take into account problems with IE browser  Maybe it will save some time to somebody else   axios post  quot  yourUrl quot                    data                   responseType   blob                 then function  response                        let fileName   response headers  quot content-disposition quot   split  quot filename  quot   1                       if  window navigator  amp  amp  window navigator msSaveOrOpenBlob       IE variant                         window navigator msSaveOrOpenBlob new Blob  response data    type   application vnd openxmlformats-officedocument spreadsheetml sheet                                 fileName                         else                           const url   window URL createObjectURL new Blob  response data    type   application vnd openxmlformats-officedocument spreadsheetml sheet                              const link   document createElement  a                            link href   url                          link setAttribute  download   response headers  quot content-disposition quot   split  quot filename  quot   1                            document body appendChild link                           link click                                                            example above is for excel files  but with little changes can be applied to any format  And on server I ve done this to send an excel file  response contentType    quot application vnd openxmlformats-officedocument spreadsheetml sheet quot   response addHeader HttpHeaders CONTENT DISPOSITION   quot attachment  filename exceptions xlsx quot

[axios] How to download files using axios

Examples related to axios