Handle file download from ajax post

Question

I have a javascript app that sends ajax POST requests to a certain URL  Response might be a JSON string or it might be a file  as an attachment   I can easily detect Content-Type and Content-Disposition in my ajax call  but once I detect that the response contains a file  how do I offer the client to download it  I ve read a number of similar threads here but none of them provide the answer I m looking for    Please  please  please do not post answers suggesting that I shouldn t use ajax for this or that I should redirect the browser  because none of this is an option  Using a plain HTML form is also not an option  What I do need is to show a download dialog to the client  Can this be done and how

User · Accepted Answer

Create a form  use the POST method  submit the form - there s no need for an iframe   When the server page responds to the request  write a response header for the mime type of the file  and it will present a download dialog - I ve done this a number of times   You want content-type of application download - just search for how to provide a download for whatever language you re using

User · Answer

If response is an Array Buffer  try this under onsuccess event in Ajax    if  event data instanceof ArrayBuffer              var binary                 var bytes   new Uint8Array event data             for  var i   0  i  lt  bytes byteLength  i                    binary    String fromCharCode bytes i                             some id   append   lt li gt  lt img src   data image png base64     window btoa binary         gt  lt  span gt  lt  li gt               return             where event data is response received in success function of xhr event

User · Answer

Here is my solution using a temporary hidden form     Create an hidden form var form       lt form gt      method    POST    action   this href   hide       Add params var params        your params         each params  function  k  v        form append     lt input gt      type    hidden    name   k   value   v            Make it part of the document and submit    body   append form   form submit       Clean up form remove      Note that I massively use JQuery but you can do the same with native JS

User · Answer

I faced the same issue and successfully solved it  My use-case is this    Post JSON data to the server and receive an excel file  That excel file is created by the server and returned as a response to the client  Download that response as a file with custom name in browser       my-button   on  click   function        Data to post data         ids   1  2  3  4  5         Use XMLHttpRequest instead of Jquery  ajax xhttp   new XMLHttpRequest    xhttp onreadystatechange   function         var a      if  xhttp readyState     4  amp  amp  xhttp status     200               Trick for making downloadable link         a   document createElement  a            a href   window URL createObjectURL xhttp response              Give filename you wish to download         a download    test-file xls           a style display    none           document body appendChild a           a click                Post data to URL which handles post request xhttp open  POST   excelDownloadUrl   xhttp setRequestHeader  Content-Type    application json       You should set responseType as blob for binary responses xhttp responseType    blob   xhttp send JSON stringify data          The above snippet is just doing following   Posting an array as JSON to the server using XMLHttpRequest  After fetching content as a blob binary   we are creating a downloadable URL and attaching it to invisible  a  link then clicking it    Here we need to carefully set few things at the server side  I set few headers in Python Django HttpResponse  You need to set them accordingly if you use other programming languages     In python django code response   HttpResponse file content  content type  application vnd openxmlformats-officedocument spreadsheetml sheet     Since I download xls excel  here  I adjusted contentType to above one  You need to set it according to your file type  You can use this technique to download any kind of files

User · Answer

Here is how I got this working https   stackoverflow com a 27563953 2845977  x000D   x000D    ajax     url    lt URL TO FILE gt      success  function data        var blob new Blob  data        var link document createElement  a        link href window URL createObjectURL blob       link download   lt FILENAME TO SAVE WITH EXTENSION gt        link click            x000D   x000D   x000D   Updated answer using download js  x000D   x000D    ajax     url    lt URL TO FILE gt      success  download bind true    lt FILENAME TO SAVE WITH EXTENSION gt      lt FILE MIME TYPE gt        x000D   x000D   x000D

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  1    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

For those looking for a solution from an Angular perspective  this worked for me    http post     url            responseType   arraybuffer     then function  response      var headers   response headers      var blob   new Blob  response data   type headers  content-type        var link   document createElement  a      link href   window URL createObjectURL blob     link download    Filename     link click

User · Answer

see  http   www henryalgus com reading-binary-files-using-jquery-ajax  it ll return a blob as a response  which can then be put into filesaver

User · Answer

What server-side language are you using  In my app I can easily download a file from an AJAX call by setting the correct headers in PHP s response   Setting headers server-side  header  HTTP 1 1 200 OK    header  Pragma  public    header  Cache-Control  must-revalidate  post-check 0  pre-check 0        The optional second  replace  parameter indicates whether the header    should replace a previous similar header  or add a second header of    the same type  By default it will replace  but if you pass in FALSE    as the second argument you can force multiple headers of the same type  header  Cache-Control  private   false    header  Content-type       mimeType        strFileName is  of course  the filename of the file being downloaded      This won t have to be the same name as the actual file  header  Content-Disposition  attachment  filename     strFileName         header  Content-Transfer-Encoding  binary    header  Content-Length      mb strlen  strFile         strFile is a binary representation of the file that is being downloaded  echo  strFile    This will in fact  redirect  the browser to this download page  but as  ahren alread said in his comment  it won t navigate away from the current page   It s all about setting the correct headers so I m sure you ll find a suitable solution for the server-side language you re using if it s not PHP   Handling the response client side  Assuming you already know how to make an AJAX call  on the client side you execute an AJAX request to the server  The server then generates a link from where this file can be downloaded  e g  the  forward  URL where you want to point to  For example  the server responds with         status  1     ok        unique one-time download token  not required of course     message   http   yourwebsite com getdownload ska08912dsa      When processing the response  you inject an iframe in your body and set the iframe s SRC to the URL you just received like this  using jQuery for the ease of this example        body   append   lt iframe src      data message        style  display  none    gt  lt  iframe gt       If you ve set the correct headers as shown above  the iframe will force a download dialog without navigating the browser away from the current page   Note  Extra addition in relation to your question  I think it s best to always return JSON when requesting stuff with AJAX technology  After you ve received the JSON response  you can then decide client-side what to do with it  Maybe  for example  later on you want the user to click a download link to the URL instead of forcing the download directly  in your current setup you would have to update both client and server-side to do so

User · Answer

I used this FileSaver js  In my case with csv files  i did this  in coffescript        ajax     url   url-to-server      data   data-to-send      success   csvData - gt        blob   new Blob  csvData     type   text csv           saveAs blob   filename csv     I think for most complicated case  the data must be processed properly  Under the hood FileSaver js implement the same approach of the answer of Jonathan Amend

User · Answer

To get Jonathan Amends answer to work in Edge I made the following changes   var blob   typeof File      function        new File  this response   filename    type  type          new Blob  this response     type  type       to this  var f   typeof File     var blob   f      function   amp  amp  Modernizr fileapi       new File  this response   filename    type  type          new Blob  this response     type  type       I would rather have posted this as a comment but I don t have enough reputation for that

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

I see you ve already found out a solution  however I just wanted to add some information which may help someone trying to achieve the same thing with big POST requests   I had the same issue a couple of weeks ago  indeed it isn t possible to achieve a  clean  download through AJAX  the Filament Group created a jQuery plugin which works exactly how you ve already found out  it is called jQuery File Download however there is a downside to this technique   If you re sending big requests through AJAX  say files  1MB  it will negatively impact responsiveness  In slow Internet connections you ll have to wait a lot until the request is sent and also wait for the file to download  It isn t like an instant  click      popup      download start   It s more like  click      wait until data is sent      wait for response      download start  which makes it appear the file double its size because you ll have to wait for the request to be sent through AJAX and get it back as a downloadable file   If you re working with small file sizes  lt 1MB you won t notice this  But as I discovered in my own app  for bigger file sizes it is almost unbearable   My app allow users to export images dynamically generated  these images are sent through POST requests in base64 format to the server  it is the only possible way   then processed and sent back to users in form of  png   jpg files  base64 strings for images  1MB are huge  this force users to wait more than necessary for the file to start downloading  In slow Internet connections it can be really annoying   My solution for this was to temporary write the file to the server  once it is ready  dynamically generate a link to the file in form of a button which changes between  Please wait     and  Download  states and at the same time  print the base64 image in a preview popup window so users can  right-click  and save it  This makes all the waiting time more bearable for users  and also speed things up   Update Sep 30  2014      Months have passed since I posted this  finally I ve found a better approach to speed things up when working with big base64 strings  I now store base64 strings into the database  using longtext or longblog fields   then I pass its record ID through the jQuery File Download  finally on the download script file I query the database using this ID to pull the base64 string and pass it through the download function    Download Script Example    lt  php    Record ID  downloadID    int   POST  id       Query Data  this example uses CodeIgniter   data          CI- gt MyQueries- gt GetDownload   downloadID       base64 tags are replaced by  removed   so we strip them out  base64       base64 decode  preg replace     removed           data 0 - gt image        This example is for base64 images  imgsize      getimagesize   base64       Set content headers header  Content-Disposition  attachment  filename  my-file png     header  Content-type     imgsize  mime        Force download echo  base64    gt    I know this is way beyond what the OP asked  however I felt it would be good to update my answer with my findings  When I was searching for solutions to my problem  I read lots of  Download from AJAX POST data  threads which didn t give me the answer I was looking for  I hope this information helps someone looking to achieve something like this

User · Answer

This is a 3 years old question but I had the same problem today  I looked your edited solution but I think that it can sacrifice the performance because it has to make a double request  So if anyone needs another solution that doesn t imply to call the service twice then this is the way I did it     lt form id  export-csv-form  method  POST  action   the path to file  gt       lt input type  hidden  name  anyValueToPassTheServer  value    gt   lt  form gt    This form is just used to call the service and avoid to use a window location    After that you just simply have to make a form submit from jquery in order to call the service and get the file  It s pretty simple but this way you can make a download using a POST  I now that this could be easier if the service you re calling is a GET  but that s not my case

User · Answer

Below is my solution for downloading multiple files depending on some list which consists of some ids and looking up in database  files will be determined and ready for download - if those exist  I am calling C  MVC action for each file using Ajax   And Yes  like others said  it is possible to do it in jQuery Ajax  I did it with Ajax success and I am always sending response 200   So  this is the key     success  function  data  textStatus  xhr      And this is my code   var i   0  var max   0  function DownloadMultipleFiles                 if      dataTables scrollBody gt tr selected   length  gt  0                    var list                       showPreloader                        dataTables scrollBody gt tr selected   each function  e                        var element     this                       var orderid   element data  orderid                        var iscustom   element data  iscustom                        var orderlineid   element data  orderlineid                        var folderPath                           var fileName                            list push   orderId  orderid  isCustomOrderLine  iscustom  orderLineId  orderlineid  folderPath  folderPath  fileName  fileName                                         i   0                  max   list length                  DownloadFile list                             Then calling   function DownloadFile list              ajax               url    Url Action  OpenFile   OrderLines                 type   post               data  list i               xhrFields                    responseType   blob                             beforeSend  function  xhr                    xhr setRequestHeader  RequestVerificationToken                          input hidden name    RequestVerificationToken     val                                 success  function  data  textStatus  xhr                       check for a filename                 var filename                       var disposition   xhr 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                           var a   document createElement  a                        var url   window URL createObjectURL data                       a href   url                      a download   filename                      document body append a                       a click                        a remove                        window URL revokeObjectURL url                                     else                       getErrorToastMessage  Production file for order line     list i  orderLineId     does not exist                                      i   i   1                  if  i  lt  max                        DownloadFile list                                                error  function  XMLHttpRequest  textStatus  errorThrown                                complete  function                      if i   max                  hidePreloader                                      C  MVC     HttpPost    ValidateAntiForgeryToken  public IActionResult OpenFile OrderLineSimpleModel model                        byte   file   null               try                               if  model    null                                          code for getting file from api - part is missing here as not important for this example                     file   apiHandler Get lt byte   gt  downloadApiUrl  token                        var contentDispositionHeader   new System Net Mime ContentDisposition                                               Inline   true                          FileName   fileName                                                  Response Headers Add  Content-Disposition   contentDispositionHeader ToString        attachment                        Response Headers Add  Content-Type    application pdf                        Response Headers Add  Content-Disposition    attachment  filename     fileName                       Response Headers Add  Content-Transfer-Encoding    binary                        Response Headers Add  Content-Length   file Length ToString                                                  catch  Exception ex                                this logger LogError ex   Error getting pdf   null                   return Ok                               return File file  System Net Mime MediaTypeNames Application Pdf               As long as you return response 200  success in Ajax can work with it  you can check if file actually exist or not as the line below in this case would be false and you can inform user about that    if  disposition  amp  amp  disposition indexOf  attachment       -1

User · Answer

I want to point out some difficulties that arise when using the technique in the accepted answer  i e  using a form post    You can t set headers on the request  If your authentication schema involves headers  a Json-Web-Token passed in the Authorization header  you ll have to find other way to send it  for example as a query parameter  You can t really tell when the request has finished  Well  you can use a cookie that gets set on response  as done by jquery fileDownload  but it s FAR from perfect  It won t work for concurrent requests and it will break if a response never arrives  If the server responds with a error  the user will be redirected to the error page  You can only use the content types supported by a form  Which means you can t use JSON    I ended up using the method of saving the file on S3 and sending a pre-signed URL to get the file

User · Answer

Don t give up so quickly  because this can be done  in modern browsers  using parts of the FileAPI  var xhr   new XMLHttpRequest    xhr open  POST   url  true   xhr responseType    blob   xhr onload   function          if  this status     200            var blob   this response          var filename    quot  quot           var disposition   xhr getResponseHeader  Content-Disposition            if  disposition  amp  amp  disposition indexOf  attachment       -1                var filenameRegex    filename     n        quot       2     n                  var matches   filenameRegex exec disposition               if  matches    null  amp  amp  matches 1   filename   matches 1  replace     quot   g                          if  typeof window navigator msSaveBlob      undefined                    IE workaround for  quot HTML7007  One or more blob URLs were revoked by closing the blob for which they were created  These URLs will no longer resolve as the data backing the URL has been freed  quot              window navigator msSaveBlob blob  filename             else               var URL   window URL    window webkitURL              var downloadUrl   URL createObjectURL blob                if  filename                       use HTML5 a download  attribute to specify filename                 var a   document createElement  quot a quot                       safari doesn t support this yet                 if  typeof a download      undefined                         window location href   downloadUrl                    else                       a href   downloadUrl                      a download   filename                      document body appendChild a                       a click                                    else                   window location href   downloadUrl                             setTimeout function      URL revokeObjectURL downloadUrl      100      cleanup                    xhr setRequestHeader  Content-type    application x-www-form-urlencoded    xhr send   param params  true     Or if using jQuery ajax    ajax       type   quot POST quot       url  url      data  params      xhrFields            responseType   blob     to avoid binary data being mangled on charset conversion            success  function blob  status  xhr               check for a filename         var filename    quot  quot           var disposition   xhr getResponseHeader  Content-Disposition            if  disposition  amp  amp  disposition indexOf  attachment       -1                var filenameRegex    filename     n        quot       2     n                  var matches   filenameRegex exec disposition               if  matches    null  amp  amp  matches 1   filename   matches 1  replace     quot   g                          if  typeof window navigator msSaveBlob      undefined                    IE workaround for  quot HTML7007  One or more blob URLs were revoked by closing the blob for which they were created  These URLs will no longer resolve as the data backing the URL has been freed  quot              window navigator msSaveBlob blob  filename             else               var URL   window URL    window webkitURL              var downloadUrl   URL createObjectURL blob                if  filename                       use HTML5 a download  attribute to specify filename                 var a   document createElement  quot a quot                       safari doesn t support this yet                 if  typeof a download      undefined                         window location href   downloadUrl                    else                       a href   downloadUrl                      a download   filename                      document body appendChild a                       a click                                    else                   window location href   downloadUrl                             setTimeout function      URL revokeObjectURL downloadUrl      100      cleanup

User · Answer

Here is my solution  gathered from different sources  Server side implementation        String contentType   MediaType APPLICATION OCTET STREAM VALUE         Set headers     response setHeader  content-disposition    attachment  filename      fileName       response setContentType contentType          Copy file to output stream     ServletOutputStream servletOutputStream   response getOutputStream        try  InputStream inputStream   new FileInputStream file             IOUtils copy inputStream  servletOutputStream         finally           servletOutputStream flush            Utils closeQuitely servletOutputStream           fileToDownload   null          Client side implementation  using jquery      ajax   type   POST   contentType   application json       url   lt download file url gt       data  JSON stringify postObject       error  function XMLHttpRequest  textStatus  errorThrown            alert errorThrown              success  function message  textStatus  response           var header   response getResponseHeader  Content-Disposition           var fileName   header split      1          var blob   new Blob  message           var link   document createElement  a           link href   window URL createObjectURL blob          link download   fileName         link click

User · Answer

As others have stated  you can create and submit a form to download via a POST request   However  you don t have to do this manually   One really simple library for doing exactly this is jquery redirect   It provides an API similar to the standard jQuery post method     redirect url   values   method   target

User · Answer

I needed a similar solution to  alain-cruz s one  but in nuxt vue with multiple downloads  I know browsers block multiple file downloads  and I also have API which returns a set of csv formatted data I was going to use JSZip at first but I needed IE support so here is my solution  If anyone can help me improve this that would be great  but it s working for me so far   API returns   data       body        fileOne    col1    col2    datarow1 1    datarow1 2    so on       fileTwo    col1    col2              page vue    lt template gt     lt b-link  click prevent  handleFileExport  gt Export lt b-link gt   lt  template gt   export default        data          return          fileNames    fileOne    fileTwo                   computed           mapState          fileOne   state    gt  state exportFile fileOne         fileTwo   state    gt  state exportFile fileTwo                 method        handleExport             exportFileAction in store exportFile needs to return promise       this  store dispatch  exportFile exportFileAction   paramsToSend           then async  response    gt               const downloadPrep   this fileNames map async  fileName    gt                  using lodash to get computed data by the file name            const currentData   await   get this     fileName                const currentFileName   fileName             return   currentData  currentFileName                          const response   await Promise all downloadPrep            return response                    then async  data    gt             data forEach    currentData  currentFileName      gt               this forceFileDownload currentData  currentFileName                                  catch console error              forceFileDownload data  fileName         const url   window URL           createObjectURL new Blob  data     type   text csv charset utf-8             const link   document createElement  a         link href   url       link setAttribute  download      fileName  csv         document body appendChild link        link click

[javascript] Handle file download from ajax post

Examples related to javascript

Examples related to jquery

Examples related to ajax