JavaScript jQuery to download file via POST with JSON data

Question

I have a jquery-based single-page webapp  It communicates with a RESTful web service via AJAX calls    I m trying to accomplish the following    Submit a POST that contains JSON data to a REST url  If the request specifies a JSON response  then JSON is returned  If the request specifies a PDF XLS etc response  then a downloadable binary is returned    I have 1  amp  2 working now  and the client jquery app displays the returned data in the web page by creating DOM elements based on the JSON data  I also have  3 working from the web-service point of view  meaning it will create and return a binary file if given the correct JSON parameters  But I m unsure the best way to deal with  3 in the client javascript code   Is it possible to get a downloadable file back from an ajax call like this  How do I get the browser to download and save the file     ajax       type   POST       url    services test       contentType   application json       data  JSON stringify  category  42  sort  3  type   pdf         dataType   json       success  function json  status           if  status     success                 log  Error loading data                return                    log  Data loaded                error  function result  status  err            log  Error loading data            return              The server responds with the following headers   Content-Disposition attachment  filename export-1282022272283 pdf Content-Length 5120 Content-Type application pdf Server Jetty 6 1 11    Another idea is to generate the PDF and store it on the server and return JSON that includes a URL to the file  Then  issue another call in the ajax success handler to do something like the following   success  function json status        window location href   json url      But doing that means I would need to make more than one call to the server  and my server would need to build downloadable files  store them somewhere  then periodically clean up that storage area   There must be a simpler way to accomplish this  Ideas     EDIT  After reviewing the docs for   ajax  I see that the response dataType can only be one of xml  html  script  json  jsonp  text  so I m guessing there is no way to directly download a file using an ajax request  unless I embed the binary file in using Data URI scheme as suggested in the  VinayC answer  which is not something I want to do    So I guess my options are    Not use ajax and instead submit a form post and embed my JSON data into the form values  Would probably need to mess with hidden iframes and such  Not use ajax and instead convert my JSON data into a query string to build a standard GET request and set window location href to this URL  May need to use event preventDefault   in my click handler to keep browser from changing from the application URL  Use my other idea above  but enhanced with suggestions from the  naikus answer  Submit AJAX request with some parameter that lets web-service know this is being called via an ajax call  If the web service is called from an ajax call  simply return JSON with a URL to the generated resource  If the resource is called directly  then return the actual binary file    The more I think about it  the more I like the last option  This way I can get information back about the request  time to generate  size of file  error messages  etc   and I can act on that information before starting the download  The downside is extra file management on the server   Any other ways to accomplish this  Any pros cons to these methods I should be aware of

User · Answer

There is a simplier way  create a form and post it  this runs the risk of resetting the page if the return mime type is something that a browser would open  but for csv and such it s perfect  Example requires underscore and jquery  var postData         filename filename      filecontent filecontent    var fakeFormHtmlFragment     lt form style  display  none   method  POST  action    SAVEAS PHP MODE URL    gt      each postData  function postValue  postKey       var escapedKey   postKey replace               replace                 var escapedValue   postValue replace               replace                 fakeFormHtmlFragment      lt input type  hidden  name    escapedKey    value    escapedValue    gt        fakeFormHtmlFragment      lt  form gt     fakeFormDom     fakeFormHtmlFragment      body   append  fakeFormDom    fakeFormDom submit      For things like html  text and such  make sure the mimetype is some thing like application octet-stream  php code   lt  php        get HTTP POST variable which is a string  foo bar     param string  param     param bool  required     return string     function getHTTPPostString   param   required   false        if  isset   POST  param              if  required                echo  required POST param   param  missing               exit 1            else               return                         return trim   POST  param        filename   getHTTPPostString  filename   true    filecontent   getHTTPPostString  filecontent   true    header  Content-type  application octet-stream    header  Content-Disposition  attachment  filename    filename      echo  filecontent

User · Answer

letronje s solution only works for very simple pages  document body innerHTML    takes the HTML text of the body  appends the iframe HTML  and sets the innerHTML of the page to that string  This will wipe out any event bindings your page has  amongst other things  Create an element and use appendChild instead     post   create binary file php   postData  function retData      var iframe   document createElement  iframe      iframe setAttribute  src   retData url     iframe setAttribute  style    display  none      document body appendChild iframe          Or using jQuery    post   create binary file php   postData  function retData         body   append   lt iframe src      retData url     style  display  none    gt  lt  iframe gt            What this actually does  perform a post to  create binary file php with the data in the variable postData  if that post completes successfully  add a new iframe to the body of the page  The assumption is that the response from  create binary file php will include a value  url   which is the URL that the generated PDF XLS etc file can be downloaded from  Adding an iframe to the page that references that URL will result in the browser promoting the user to download the file  assuming that the web server has the appropriate mime type configuration

User · Answer

Found it somewhere long time ago and it works perfectly   let payload       key   val     key2   val2      let url    path to api php   let form       lt form gt      method    POST    action   url   hide      each payload   k  v    gt  form append     lt input gt      type    hidden    name   k   value   v          body   append form   form submit    form remove

User · Answer

I have been awake for two days now trying to figure out how to download a file using jquery with ajax call  All the support i got could not help my situation until i try this   Client Side   x000D   x000D  function exportStaffCSV t    x000D      x000D      var postData     checkOne  t    x000D        ajax   x000D          type   POST   x000D          url    Admin Staff exportStaffAsCSV   x000D          data  postData  x000D          success  function  data    x000D              SuccessMessage  file download will start in few second      x000D              var url     Admin Staff DownloadCSV data     data  x000D              window location   url  x000D             x000D          x000D          traditional  true  x000D          error  function  xhr  status  p3  p4    x000D              var err    Error           status         p3         p4  x000D              if  xhr responseText  amp  amp  xhr responseText 0          x000D                  err   JSON parse xhr responseText  Message  x000D              ErrorMessage err   x000D            x000D          x000D   x000D    x000D   x000D   x000D    Server Side    HttpPost      public string exportStaffAsCSV IEnumerable lt string gt  checkOne                StringWriter sw   new StringWriter            try                       var data    db staffInfoes Where t   gt  checkOne Contains t staffID   ToList                sw WriteLine    First Name     Last Name     Other Name     Phone Number     Email Address     Contact Address     Date of Joining                  foreach  var item in data                                sw WriteLine string Format     0       1       2       3       4       5       6                          item firstName                      item lastName                      item otherName                      item phone                      item email                      item contact Address                      item doj                                                         catch  Exception e                               return sw ToString                  On ajax success request  it will be redirected to this method as a Get verb request with the returned date string      public FileContentResult DownloadCSV string data                return File new System Text UTF8Encoding   GetBytes data   System Net Mime MediaTypeNames Application Octet  filename             this method will now return the file for download or open          Good luck

User · Answer

scope downloadSearchAsCSV   function httpOptions      var httpOptions     extend       method   POST       url             data    null      httpOptions      http httpOptions  then function response        if  response status  gt   400           alert response status     - Server Error  nUnable to download CSV from POST n    JSON stringify httpOptions data          else          scope downloadResponseAsCSVFile response                        source  https   github com asafdav ng-csv blob master src ng-csv directives ng-csv js     param response      scope downloadResponseAsCSVFile   function response      var charset    utf-8     var filename    search results csv     var blob   new Blob  response data         type   text csv charset    charset                if  window navigator msSaveOrOpenBlob        navigator msSaveBlob blob  filename       untested     else       var downloadContainer   angular element   lt div data-tap-disabled  true  gt  lt a gt  lt  a gt  lt  div gt         var downloadLink        angular element downloadContainer children   0        downloadLink attr  href   window URL createObjectURL blob        downloadLink attr  download    search results csv        downloadLink attr  target     blank          document find  body   append downloadContainer         timeout function           downloadLink 0  click          downloadLink remove           null               Gets blocked by Chrome popup-blocker     var csv window   window open                csv window document write   lt meta name  content-type  content  text csv  gt         csv window document write   lt meta name  content-disposition  content  attachment   filename data csv  gt           csv window document write response data

User · Answer

I know this kind of old  but I think I have come up with a more elegant solution   I had the exact same problem   The issue I was having with the solutions suggested were that they all required the file being saved on the server  but I did not want to save the files on the server  because it introduced other problems  security  the file could then be accessed by non-authenticated users  cleanup  how and when do you get rid of the files    And like you  my data was complex  nested JSON objects that would be hard to put into a form   What I did was create two server functions   The first validated the data   If there was an error  it would be returned   If it was not an error  I returned all of the parameters serialized encoded as a base64 string   Then  on the client  I have a form that has only one hidden input and posts to a second server function   I set the hidden input to the base64 string and submit the format   The second server function decodes deserializes the parameters and generates the file   The form could submit to a new window or an iframe on the page and the file will open up   There s a little bit more work involved  and perhaps a little bit more processing  but overall  I felt much better with this solution   Code is in C  MVC      public JsonResult Validate int reportId  string format  ReportParamModel   parameters                   TODO  do validation          if  valid                        GenerateParams generateParams   new GenerateParams reportId  format  parameters                string data   new EntityBase64Converter lt GenerateParams gt    ToBase64 generateParams                return Json new   State    Success   Data   data                        return Json new   State    Error   Data    Error message                 public ActionResult Generate string data                GenerateParams generateParams   new EntityBase64Converter lt GenerateParams gt    ToEntity data               TODO  Generate file          return File bytes  mimeType           on the client      function generate reportId  format  parameters                var data                 reportId  reportId              format  format              params  params                       ajax                        url    Validate               type   POST               data  JSON stringify data               dataType   json               contentType   application json  charset utf-8               success  generateComplete                        function generateComplete result                if  result State     Success                            this could should already be set in the HTML             formGenerate action     Generate               formGenerate target   iframeFile               hidData   result Data              formGenerate submit                      else                TODO  display error messages

User · Answer

Another approach instead of saving the file on the server and retrieving it  is to use  NET 4 0  ObjectCache with a short expiration until the second Action  at which time it can be definitively dumped   The reason that I want to use JQuery Ajax to do the call  is that it is asynchronous  Building my dynamic PDF file takes quite a bit of time  and I display a busy spinner dialog during that time  it also allows other work to be done   The approach of using the data returned in the  success   to create a Blob does not work reliably  It depends on the content of the PDF file  It is easily corrupted by data in the response  if it is not completely textual which is all that Ajax can handle

User · Answer

In short  there is no simpler way  You need to make another server request to show PDF file  Al though  there are few alternatives but they are not perfect and won t work on all browsers    Look at data URI scheme  If binary data is small then you can perhaps use javascript to open window passing data in URI   Windows IE only solution would be to have  NET control or FileSystemObject to save the data on local file system and open it from there

User · Answer

I think the best approach is to use a combination  Your second approach seems to be an elegant solution where browsers are involved    So depending on the how the call is made   whether its a browser or a web service call  you can use a combination of the two  with sending a URL to the browser and sending raw data to any other web service client

User · Answer

I ve been playing around with another option that uses blobs  I ve managed to get it to download text documents  and I ve downloaded PDF s  However they are corrupted    Using the blob API you will be able to do the following     post         function  result        var blob new Blob  result        var link document createElement  a        link href window URL createObjectURL blob       link download  myFileName txt       link click           This is IE 10   Chrome 8   FF 4   See https   developer mozilla org en-US docs Web API URL createObjectURL  It will only download the file in Chrome  Firefox and Opera  This uses a download attribute on the anchor tag to force the browser to download it

User · Answer

Solution  Content-Disposition attachment seems to work for me   self set header  Content-Type    application json   self set header  Content-Disposition    attachment  filename learned data json     Workaround  application octet-stream  I had something similar happening to me with a JSON  for me on the server side I was setting the header to self set header  Content-Type    application json   however when i changed it to   self set header  Content-Type    application octet-stream     It automatically downloaded it   Also know that in order for the file to still keep the  json suffix you will need to it on filename header   self set header  Content-Disposition    filename learned data json

User · Answer

Not entirely an answer to the original post  but a quick and dirty solution for posting a json-object to the server and dynamically generating a download   Client side jQuery   var download   function resource  payload             downloadFormPoster   remove             lt div id  downloadFormPoster  style  display  none   gt  lt iframe name  downloadFormPosterIframe  gt  lt  iframe gt  lt  div gt    appendTo  body             lt form action      resource      target  downloadFormPosterIframe  method  post  gt             lt input type  hidden  name  jsonstring  value      JSON stringify payload        gt             lt  form gt           appendTo   downloadFormPoster          submit          and then decoding the json-string at the serverside and setting headers for download  PHP example     request   json decode   POST  jsonstring     true   header  Content-Type  application csv    header  Content-Disposition  attachment  filename export csv    header  Pragma  no-cache

User · Answer

It is been a while since this question was asked but I had the same challenge and want to share my solution  It uses elements from the other answers but I wasn t able to find it in its entirety  It doesn t use a form or an iframe but it does require a post get request pair  Instead of saving the file between the requests  it saves the post data  It seems to be both simple and effective    client  var apples   new Array        construct data - replace with your own   ajax      type   POST      url    Home Download      data  JSON stringify apples      contentType   application json      dataType   text       success  function  data          var url     Home Download id     data        window location   url               server   HttpPost     called first public ActionResult Download Apple   apples       string json   new JavaScriptSerializer   Serialize apples      string id   Guid NewGuid   ToString       string path   Server MapPath string Format    temp  0  json   id       System IO File WriteAllText path  json       return Content id         called next public ActionResult Download string id       string path   Server MapPath string Format    temp  0  json   id       string json   System IO File ReadAllText path      System IO File Delete path      Apple   apples   new JavaScriptSerializer   Deserialize lt Apple   gt  json          work with apples to build your file in memory    byte   file   createPdf apples        Response AddHeader  Content-Disposition    attachment  filename juicy pdf       return File file   application pdf

User · Answer

With HTML5  you can just create an anchor and click on it  There is no need to add it to the document as a child   const a   document createElement  a    a download       a href   urlForPdfFile  a click      All done   If you want to have a special name for the download  just pass it in the download attribute   const a   document createElement  a    a download    my-special-name pdf   a href   urlForPdfFile  a click

[javascript] JavaScript/jQuery to download file via POST with JSON data

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to rest