download file using an ajax request

Question

I want to send an   ajax download request  when I click on a button  so I tried in this way   javascript   var xhr   new XMLHttpRequest    xhr open  GET    download php    xhr send      download php    lt   header  Cache-Control  public    header  Content-Description  File Transfer    header  Content-Disposition  attachment  filename  file txt    header  Content-Transfer-Encoding  binary        readfile  file txt      gt    but doesn t work as expected  how can I do   Thank you in advance

User · Answer

Cross browser solution  tested on Chrome  Firefox  Edge  IE11   In the DOM  add an hidden link tag    lt a id  target  style  display  none  gt  lt  a gt    Then   var req   new XMLHttpRequest    req open  GET   downloadUrl  true   req responseType    blob   req setRequestHeader  my-custom-header    custom-value       adding some headers  if needed   req onload   function  event      var blob   req response    var fileName   null    var contentType   req getResponseHeader  content-type          IE EDGE seems not returning some response header   if  req getResponseHeader  content-disposition          var contentDisposition   req getResponseHeader  content-disposition        fileName   contentDisposition substring contentDisposition indexOf      1       else       fileName    unnamed     contentType substring contentType indexOf      1          if  window navigator msSaveOrOpenBlob           Internet Explorer     window navigator msSaveOrOpenBlob new Blob  blob    type  contentType    fileName       else       var el   document getElementById  target        el href   window URL createObjectURL blob       el download   fileName      el click           req send

User · Answer

I prefer location assign url    Complete syntax example   document location assign  https   www urltodocument com document pdf      developer mozilla org en-US docs Web API Location assign

User · Answer

It is possible  You can have the download started from inside an ajax function  for example  just after the  csv file is created   I have an ajax function that exports a database of contacts to a  csv file  and just after it finishes  it automatically starts the  csv file download  So  after I get the responseText and everything is Ok  I redirect browser like this   window location  download php filename export csv     My download php file looks like this    lt  php       file     GET  filename         header  Cache-Control  public        header  Content-Description  File Transfer        header  Content-Disposition  attachment  filename    file          header  Content-Transfer-Encoding  binary        header  Content-Type  binary octet-stream        readfile  file      gt    There is no page refresh whatsoever and the file automatically starts downloading    NOTE - Tested in the following browsers   Chrome v37 0 2062 120  Firefox v32 0 1 Opera v12 17 Internet Explorer v11

User · Answer

For those looking a more modern approach  you can use the fetch API  The following example shows how to download a spreadsheet file  It is easily done with the following code   fetch url        body  JSON stringify data       method   POST       headers             Content-Type    application json  charset utf-8             then response   gt  response blob     then response   gt        const blob   new Blob  response    type   application application vnd openxmlformats-officedocument spreadsheetml sheet         const downloadUrl   URL createObjectURL blob       const a   document createElement  a        a href   downloadUrl      a download    file xlsx       document body appendChild a       a click         I believe this approach to be much easier to understand than other XMLHttpRequest solutions  Also  it has a similar syntax to the jQuery approach  without the need to add any additional libraries   Of course  I would advise checking to which browser you are developing  since this new approach won t work on IE  You can find the full browser compatibility list on the following link   Important  In this example I am sending a JSON request to a server listening on the given url  This url must be set  on my example I am assuming you know this part  Also  consider the headers needed for your request to work  Since I am sending a JSON  I must add the Content-Type header and set it to application json  charset utf-8  as to let the server know the type of request it will receive

User · Answer

Joao Marcos solution works for me but I had to modify the code to make it work on IE  below if what the code looks like          downloadFile url filename            var that   this          const extension    url split      pop   split      0  split      pop             var req   new XMLHttpRequest            req open  GET   url  true           req responseType    blob           req onload   function  event                const fileName      filename    extension                const blob   req response               if  window navigator msSaveBlob       IE                 window navigator msSaveOrOpenBlob blob  fileName                              const link   document createElement  a                link href   window URL createObjectURL blob                               link download   fileName              link click                URL revokeObjectURL link href                        req send

User · Answer

Update April 27  2015  Up and coming to the HTML5 scene is the download attribute  It s supported in Firefox and Chrome  and soon to come to IE11  Depending on your needs  you could use it instead of an AJAX request  or using window location  so long as the file you want to download is on the same origin as your site   You could always make the AJAX request window location a fallback by using some JavaScript to test if download is supported and if not  switching it to call window location   Original answer  You can t have an AJAX request open the download prompt since you physically have to navigate to the file to prompt for download  Instead  you could use a success function to navigate to download php  This will open the download prompt but won t change the current page     ajax       url   download php       type   POST       success  function             window location    download php               Even though this answers the question  it s better to just use window location and avoid the AJAX request entirely

User · Answer

This solution is not very different from those above  but for me it works very well and i think it s clean   I suggest to base64 encode the file server side  base64 encode    if you are using PHP  and send the base64 encoded data to the client  On the client you do this    let blob   this dataURItoBlob THE MIME TYPE         response file    let uri   URL createObjectURL blob    let link   document createElement  a     link download   THE FILE NAME   link href   uri   document body appendChild link    link click     document body removeChild link     This code puts the encoded data in a link and simulates a click on the link  then it removes it

User · Answer

there is another solution to download a web page in ajax  But I am referring to a page that must first be processed and then downloaded   First you need to separate the page processing from the results download   1  Only the page calculations are made in the ajax call      post  CalculusPage php     calculusFunction  true  ID  29  data1   a   data2   b             function data  status                        if  status     success                                     2  In the answer the page that uses the previous calculations is downloaded  For example  this can be a page that prints the results of a table calculated in the ajax call                     window location href   DownloadPage php   ID   29                                               For example  in the CalculusPage php      if    empty   POST  calculusFunction                      ID     POST  ID              query    INSERT INTO ExamplePage  data1  data2  VALUES       POST  data1            POST  data2       WHERE id      ID                        For example  in the DownloadPage php       ID     GET  ID          sede    SELECT   FROM ExamplePage WHERE id      ID                filename  Export Data xls       header  Content-Type  application vnd ms-excel        header  Content-Disposition  inline  filename  filename               I hope this solution can be useful for many  as it was for me

User · Answer

Decoding a filename from the header is a little bit more complex         var filename    default pdf       var disposition   req getResponseHeader  Content-Disposition         if  disposition  amp  amp  disposition indexOf  attachment       -1                var filenameRegex    filename     n              2     n             var matches   filenameRegex exec disposition           if  matches    null  amp  amp  matches 1               filename   matches 1  replace       g

User · Answer

You actually don t need ajax at all for this  If you just set  download php  as the href on the button  or  if it s not a link use   window location    download php     The browser should recognise the binary download and not load the actual page but just serve the file as a download

User · Answer

To make the browser downloads a file you need to make the request like that    function downloadFile urlToSend         var req   new XMLHttpRequest         req open  GET   urlToSend  true        req responseType    blob        req onload   function  event             var blob   req response           var fileName   req getResponseHeader  fileName     if you have the fileName header available          var link document createElement  a             link href window URL createObjectURL blob            link download fileName           link click                  req send

User · Answer

Your needs are covered by   window location  download php    But I think that you need to pass the file to be downloaded  not always download the same file  and that s why you are using a request  one option is to create a php file as simple as showfile php and do a request like  var myfile   filetodownload txt var url    shofile php file     myfile   ajaxRequest open  GET   url  true     showfile php   lt  php  file     GET  file    echo  file    where file is the file name passed via Get or Post in the request and then catch the response in a function simply   if ajaxRequest readyState    4                           var file   ajaxRequest responseText                          window location    downfile php file     file

[javascript] download file using an ajax request

Examples related to javascript

Examples related to php

Examples related to ajax

Examples related to file

Examples related to download