Download a file by jQuery Ajax

Question

I have a Struts2 action in the server side for file downloading    lt action name  download  class  com xxx DownAction  gt       lt result name  success  type  stream  gt           lt param name  contentType  gt text plain lt  param gt           lt param name  inputName  gt imageStream lt  param gt           lt param name  contentDisposition  gt attachment filename  fileName  lt  param gt           lt param name  bufferSize  gt 1024 lt  param gt       lt  result gt   lt  action gt    However when I call the action using the jQuery     post      download action        para1 value1      para2 value2              function data         console info data             in Firebug I see the data is retrieved with the Binary stream  I wonder how to open the file downloading window with which the user can save the file locally

User · Answer

I found a fix that while it s not actually using ajax it does allow you to use a javascript call to request the download and then get a callback when the download actually starts   I found this helpful if the link runs a server side script that takes a little bit to compose the file before sending it  so you can alert them that it s processing  and then when it does finally send the file remove that processing notification  which is why I wanted to try to load the file via ajax to begin with so that I could have an event happen when the file is requested and another when it actually starts downloading   the js on the front page  function expdone         document getElementById  exportdiv   style display  none     function expgo        document getElementById  exportdiv   style display  block      document getElementById  exportif   src  test2 php arguments data       the iframe   lt div id  exportdiv  style  display none   gt   lt img src  loader gif  gt  lt br gt  lt h1 gt Generating Report lt  h1 gt   lt iframe id  exportif  src    style  width  1px height  1px  border 0px   gt  lt  iframe gt   lt  div gt    then the other file    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script gt  function expdone         window parent expdone       lt  script gt   lt  head gt   lt body gt   lt iframe id  exportif  src   lt  php echo  http   10 192 37 211 npdtracker exportthismonth php arguments     GET  arguments      gt   gt  lt  iframe gt   lt script gt document getElementById  exportif   onload  expdone  lt  script gt   lt  body gt  lt  html gt    I think there s a way to read get data using js so then no php would be needed  but I don t know it off hand and the server I m using supports php so this works for me   thought I d share it in case it helps anyone

User · Answer

How to DOWNLOAD a file after receiving it by AJAX  It   s convenient when the file is created for a long time and you need to show PRELOADER  Example when submitting a web form    lt script gt    function             form   submit function                  loader   show              ajax               url    this  attr  action                data    this  serialize                dataType   binary               xhrFields                     responseType    blob                             success  function data  status  xhr                        loader   hide                       if data type indexOf  text html      -1    If instead of a file you get an error page                        var reader   new FileReader                           reader readAsText data                          reader onload   function    alert reader result                            return                                       var link   document createElement  a                        filename    file xlsx                      if xhr getResponseHeader  Content-Disposition      filename                         filename   xhr getResponseHeader  Content-Disposition                           filename filename match  filename           1                          filename decodeURIComponent escape filename                                         link href   URL createObjectURL data                   link download   filename                  link click                                      return false               lt  script gt    Optional functional is commented out to simplify the example   No need to create temporary files on the server   On jQuery v2 2 4 OK  There will be an error on the old version   Uncaught DOMException  Failed to read the  responseText  property from  XMLHttpRequest   The value is only accessible if the object s  responseType  is    or  text   was  blob

User · Answer

I struggled with this issue for a long time  Finally an elegant external library suggested here helped me out

User · Answer

The simple way to make the browser downloads a file is 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         This opens the browser download pop up

User · Answer

I try to download a CSV file and then do something after download has finished  So I need to implement an appropriate callback function   Using window location       is not a good idea because I cannot operate the program after finishing download   Something like this  change header so it is not a good idea   fetch is a good alternative however it cannot support IE 11  And window URL createObjectURL cannot support IE 11 You can refer this   This is my code  it is similar to the code of Shahrukh Alam  But you should take care that window URL createObjectURL maybe create memory leaks  You can refer this  When response has arrived  data will be stored into memory of browser  So before you click a link  the file has been downloaded  It means that you can do anything after download     ajax       url   your download url       type   GET      done function  data  textStatus  request           csv   gt  Blob     var blob   new Blob  data            the file name from server      var fileName   request getResponseHeader  fileName         if  window navigator  amp  amp  window navigator msSaveOrOpenBlob       for IE     window navigator msSaveOrOpenBlob blob  fileName         else      for others     var url   window URL createObjectURL blob       const a   document createElement  a        a style display    none       a href   url      a download   fileName      document body appendChild a       a click        window URL revokeObjectURL url          Do something after download                    then after download

User · Answer

function downloadURI uri  name         var link   document createElement  a        link download   name      link href   uri      link click

User · Answer

That s it works so fine in any browser  I m using asp net core    x000D   x000D              function onDownload     x000D   x000D    const api     Url Action  myaction    mycontroller      x000D    var form   new FormData document getElementById  form1     x000D   x000D    fetch api    body  form  method   POST    x000D         then resp   gt  resp blob    x000D         then blob   gt    x000D            const url   window URL createObjectURL blob   x000D              linkdownload   attr  download    Attachement zip    x000D                linkdownload   attr  href   url   x000D                linkdownload   x000D                 fadeIn 3000  x000D                    function         x000D   x000D           x000D         catch      gt  alert  An error occurred     x000D   x000D   x000D   x000D    x000D    x000D    lt button type  button  onclick  onDownload    class  btn btn-primary btn-sm  gt Click to Process Files lt  button gt  x000D    x000D    x000D    x000D    lt a role  button  href     style  display  none  class  btn btn-sm btn-secondary  id  linkdownload  gt Click to download Attachments lt  a gt  x000D    x000D    x000D    lt form asp-controller  mycontroller  asp-action  myaction  id  form1  gt  lt  form gt  x000D    x000D    x000D   x000D   x000D            function onDownload                 const api     Url Action  myaction    mycontroller                    form1 is your id form  and to get data content of form             var form   new FormData document getElementById  form1                  fetch api    body  form  method   POST                     then resp   gt  resp blob                     then blob   gt                        const url   window URL createObjectURL blob                           linkdownload   attr  download    Attachments zip                            linkdownload   attr  href   url                           linkdownload                            fadeIn 3000                              function                                                                          catch      gt  alert  An error occurred

User · Answer

Ok  based on ndpu s code heres an improved  I think  version of ajax download -  function ajax download url  data        var  iframe          iframe doc          iframe html       if    iframe       download iframe    length     0             iframe       lt iframe id  download iframe                           style  display  none  src  about blank  gt  lt  iframe gt                        appendTo  body               iframe doc    iframe 0  contentWindow     iframe 0  contentDocument      if  iframe doc document            iframe doc   iframe doc document             iframe html     lt html gt  lt head gt  lt  head gt  lt body gt  lt form method  POST  action                        url     gt         Object keys data  forEach function key           iframe html      lt input type  hidden  name    key    value    data key     gt                      iframe html     lt  form gt  lt  body gt  lt  html gt         iframe doc open        iframe doc write iframe html         iframe doc  find  form   submit        Use this like this -      someid   on  click   function         ajax download   download action     para1   1   para2   2          The params are sent as proper post params as if coming from an input rather than as a json encoded string as per the previous example   CAVEAT  Be wary about the potential for variable injection on those forms  There might be a safer way to encode those variables  Alternatively contemplate escaping them

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  I did a POST request here  Instead  you can go for a simple GET too  We cannot download the file through Ajax  must use XMLHttpRequest    Here we need to carefully set few things on 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

Noone posted this  Pekka s solution    so I ll post it  It can help someone   You don t need to do this through Ajax  Just use  window location  download action para1 value1

User · Answer

1  Framework agnostic  Servlet downloading file as attachment   lt  -- with JS -- gt   lt a href  javascript window location  downloadServlet param1 value1   gt      download  lt  a gt    lt  -- without JS -- gt   lt a href  downloadServlet param1 value1   gt download lt  a gt    2  Struts2 Framework  Action downloading file as attachment   lt  -- with JS -- gt   lt a href  javascript window location  downloadAction action param1 value1   gt      download  lt  a gt    lt  -- without JS -- gt   lt a href  downloadAction action param1 value1   gt download lt  a gt    It would be better to use  lt s a gt  tag pointing with OGNL to an URL created with  lt s url gt  tag    lt  -- without JS  with Struts tags  THE RIGHT WAY -- gt       lt s url action  downloadAction action  var  url  gt       lt s param name  param1  gt value1 lt  s param gt   lt  s ulr gt   lt s a href    url    gt download lt  s a gt    In the above cases  you need to write the Content-Disposition header to the response  specifying that the file needs to be downloaded  attachment  and not opened by the browser  inline   You need to specify the Content Type too  and you may want to add the file name and length  to help the browser drawing a realistic progressbar     For example  when downloading a ZIP   response setContentType  application zip    response addHeader  Content-Disposition                        attachment  filename   name of my file zip      response setHeader  Content-Length   myFile length        or myByte   length      With Struts2  unless you are using the Action as a Servlet  an hack for direct streaming  for example   you don t need to directly write anything to the response  simply using the Stream result type and configuring it in struts xml will work  EXAMPLE   lt result name  success  type  stream  gt      lt param name  contentType  gt application zip lt  param gt      lt param name  contentDisposition  gt attachment filename    fileName   lt  param gt      lt param name  contentLength  gt   fileLength  lt  param gt   lt  result gt    3  Framework agnostic    Struts2 framework   Servlet  Action  opening file inside the browser  If you want to open the file inside the browser  instead of downloading it  the Content-disposition must be set to inline  but the target can t be the current window location  you must target a new window created by javascript  an  lt iframe gt  in the page  or a new window created on-the-fly with the  discussed  target   blank     lt  -- From a parent page into an IFrame without javascript -- gt      lt a href  downloadServlet param1 value1  target  iFrameName  gt      download  lt  a gt    lt  -- In a new window without javascript -- gt    lt a href  downloadServlet param1 value1  target   blank  gt      download  lt  a gt    lt  -- In a new window with javascript -- gt       lt a href  javascript window open  downloadServlet param1 value1      gt      download  lt  a gt

User · Answer

If you want to use  jQuery File Download   please note this for IE  You need to reset the response or it will not download        The IE will only work if you reset response     getServletResponse   reset          The jquery fileDownload needs a cookie be set     getServletResponse   setHeader  Set-Cookie    fileDownload true  path            Do the reset of your action create InputStream and return   Your action can implement ServletResponseAware  to access getServletResponse

User · Answer

If the server is writing the file back in the response  including cookies if you use them to determine whether the file download started   Simply create a form with the values and submit it  function ajaxPostDownload url  data        var  form      if    form       download form    length     0             form      quot  lt form id  download form  quot     quot  style  display  none  width  1px  height  1px  position  absolute  top  -10000px  method  POST  action   quot    url    quot   gt  lt  form gt  quot             form appendTo  quot body quot                Clear the form fields      form html  quot  quot          Create new form fields     Object keys data  forEach function  key             form append  quot  lt input type  hidden  name   quot    key    quot   value   quot    data key     quot   gt  quot                  Submit the form post      form submit       Usage  ajaxPostDownload   fileController ExportFile         DownloadToken   newDownloadToken       Name   txtName val        Type   txtType val        Controller Method   HttpPost  public FileResult ExportFile string DownloadToken  string Name  string Type          Set DownloadToken Cookie      Response SetCookie new HttpCookie  quot downloadToken quot   DownloadToken                Expires   DateTime UtcNow AddDays 1           Secure   false              using  var output   new MemoryStream                    get File         return File output ToArray     quot application vnd ms-excel quot    quot NewFile xls quot

User · Answer

2019 modern browsers update  This is the approach I d now recommend with a few caveats    A relatively modern browser is required If the file is expected to be very large you should likely do something similar to the original approach  iframe and cookie  because some of the below operations could likely consume system memory at least as large as the file being downloaded and or other interesting CPU side effects     x000D   x000D  fetch  https   jsonplaceholder typicode com todos 1   x000D     then resp   gt  resp blob    x000D     then blob   gt    x000D      const url   window URL createObjectURL blob   x000D      const a   document createElement  a    x000D      a style display    none   x000D      a href   url  x000D         the filename you want x000D      a download    todo-1 json   x000D      document body appendChild a   x000D      a click    x000D      window URL revokeObjectURL url   x000D      alert  your file has downloaded        or you know  something with better UX    x000D       x000D     catch      gt  alert  oh no      x000D   x000D   x000D    2012 Original jQuery iframe Cookie based approach  Bluish is completely right about this  you can t do it through Ajax because JavaScript cannot save files directly to a user s computer  out of security concerns   Unfortunately pointing the main window s URL at your file download means you have little control over what the user experience is when a file download occurs   I created jQuery File Download which allows for an  Ajax like  experience with file downloads complete with OnSuccess and OnFailure callbacks to provide for a better user experience  Take a look at my blog post on the common problem that the plugin solves and some ways to use it and also a demo of jQuery File Download in action  Here is the source  Here is a simple use case demo using the plugin source with promises  The demo page includes many other   better UX  examples as well     fileDownload  some file pdf        done function      alert  File download a success             fail function      alert  File download failed           Depending on what browsers you need to support you may be able to use https   github com eligrey FileSaver js  which allows more explicit control than the IFRAME method jQuery File Download uses

User · Answer

I have created little function as workaround solution  inspired by  JohnCulviner plugin       creates iframe and form in it with hidden field     then submit form with provided data    url - form url    data - data to form field    input name - form hidden input name  function ajax download url  data  input name        var  iframe          iframe doc          iframe html       if    iframe       download iframe    length     0             iframe       lt iframe id  download iframe                           style  display  none  src  about blank  gt  lt  iframe gt                        appendTo  body               iframe doc    iframe 0  contentWindow     iframe 0  contentDocument      if  iframe doc document            iframe doc   iframe doc document             iframe html     lt html gt  lt head gt  lt  head gt  lt body gt  lt form method  POST  action                        url     gt                         lt input type hidden name      input name      value                        JSON stringify data       gt  lt  form gt                         lt  body gt  lt  html gt         iframe doc open        iframe doc write iframe html         iframe doc  find  form   submit        Demo with click event       someid   on  click   function         ajax download   download action     para1   1   para2   2    dataname

User · Answer

Ok so here is the working code when Using MVC and you are getting your file from a controller  lets say you have your byte array declare and populate   the only thing you need to do is to use the File function  using System Web Mvc   byte   bytes        insert your bytes in the array return File bytes  System Net Mime MediaTypeNames Application Octet   nameoffile exe      and then   in the same controller   add thoses 2 functions  protected override void OnResultExecuting ResultExecutingContext context                CheckAndHandleFileResult context            base OnResultExecuting context              private const string FILE DOWNLOAD COOKIE NAME    fileDownload             lt summary gt          If the current response is a FileResult  an MVC base class for files  then write a         cookie to inform jquery fileDownload that a successful file download has occured          lt  summary gt           lt param name  context  gt  lt  param gt      private void CheckAndHandleFileResult ResultExecutingContext context                if  context Result is FileResult                jquery fileDownload uses this cookie to determine that a file download has completed successfully             Response SetCookie new HttpCookie FILE DOWNLOAD COOKIE NAME   true     Path                   else               ensure that the cookie is removed in case someone did a file download without using jquery fileDownload             if  Request Cookies FILE DOWNLOAD COOKIE NAME     null                  Response Cookies FILE DOWNLOAD COOKIE NAME  Expires   DateTime Now AddYears -1           and then you will be able to call your controller to download and get the  success  or  failure  callback    fileDownload mvcUrl  name of the controller                  httpMethod   POST               successCallback  function  url                  insert success code                             failCallback  function  html  url                  insert fail code

User · Answer

In Rails  I do it this way    function download file file id      let url           files     file id     download file         ajax       type   GET       url  url      processData  false      success  function  data           window location   url             error  function  xhr         console log   Error    gt  gt  gt  gt      JSON stringify xhr                      The trick is the window location part  The controller s method looks like     GET  files   id  download file  def download file     send file  file file             disposition   gt   attachment              url based filename   gt  false  end

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

Here is what I did  pure javascript and html  Did not test it but this should work in all browsers      Javascript Function   var iframe   document createElement  iframe    iframe id    IFRAMEID   iframe style display    none   document body appendChild iframe   iframe src    SERVERURL          param  scope filtro   iframe addEventListener  load   function           console log  FILE LOAD DONE   Download should start now             Using just components that is supported in all browsers no additional   libraries          Here is my server side JAVA Spring controller code     RequestMapping value     rootto my xlsx   method   RequestMethod GET  public void downloadExcelFile  RequestParam value    param1   required   false  String param1      HttpServletRequest request  HttpServletResponse response              throws ParseException        Workbook wb   service getWorkbook param1       if  wb    null            try               String fileName    myfile     sdf format new Date                 response setContentType  application vnd openxmlformats-officedocument spreadsheetml sheet                response setHeader  Content-disposition    attachment  filename       fileName     xlsx                  wb write response getOutputStream                 response getOutputStream   close              catch  IOException e                e printStackTrace

User · Answer

Use window open https   developer mozilla org en-US docs Web API Window open  For example  you can put this line of code in a click handler   window open   file txt     blank      It will open a new tab  because of the   blank  window-name  and that tab will open the URL   Your server-side code should also have something like this   res set  Content-Disposition    attachment  filename file txt      And that way  the browser should prompt the user to save the file to disk  instead of just showing them the file  It will also automatically close the tab that it just opened

User · Answer

You can with HTML5  NB  The file data returned MUST be base64 encoded because you cannot JSON encode binary data  In my AJAX response I have a data structure that looks like this         result   OK       download            mimetype  string mimetype in the form  major minor            filename  string the name of the file to download           data  base64 the binary data as base64 to download            That means that I can do the following to save a file via AJAX  var a   document createElement  a    if  window URL  amp  amp  window Blob  amp  amp    download  in a   amp  amp  window atob           Do it the HTML5 compliant way     var blob   base64ToBlob result download data  result download mimetype       var url   window URL createObjectURL blob       a href   url      a download   result download filename      a click        window URL revokeObjectURL url       The function base64ToBlob was taken from here and must be used in compliance with this function   function base64ToBlob base64  mimetype  slicesize        if   window atob     window Uint8Array               The current browser doesn t have the atob function  Cannot continue         return null            mimetype   mimetype            slicesize   slicesize    512      var bytechars   atob base64       var bytearrays           for  var offset   0  offset  lt  bytechars length  offset    slicesize            var slice   bytechars slice offset  offset   slicesize           var bytenums   new Array slice length           for  var i   0  i  lt  slice length  i                  bytenums i    slice charCodeAt i                     var bytearray   new Uint8Array bytenums           bytearrays bytearrays length    bytearray            return new Blob bytearrays   type  mimetype         This is good if your server is dumping filedata to be saved  However  I ve not quite worked out how one would implement a HTML4 fallback

User · Answer

Adding some more things to  above answer for downloading a file  Below is some java spring code which generates byte Array   RequestMapping value     downloadReport   method     RequestMethod POST        public ResponseEntity lt byte   gt  downloadReport               RequestBody final SomeObejct obj  HttpServletResponse response  throws Exception            OutputStream out   new ByteArrayOutputStream               write something to output stream         HttpHeaders respHeaders   new HttpHeaders            respHeaders setContentType MediaType APPLICATION OCTET STREAM           respHeaders add  X-File-Name   name           ByteArrayOutputStream bos    ByteArrayOutputStream  out          return new ResponseEntity lt byte   gt  bos toByteArray    respHeaders  HttpStatus CREATED           Now in  javascript code using FileSaver js  can download a file with below code   var json angular toJson  somejsobject    var url apiEndPoint  some url   var xhr   new XMLHttpRequest      headers  X-File-Name   xhr onreadystatechange   function         if  this readyState    4  amp  amp  this status    201            var res   this response          var fileName this getResponseHeader  X-File-Name            var data   new Blob  res            saveAs data  fileName     this from FileSaver js             xhr open  POST   url   xhr setRequestHeader  Authorization   Bearer     token   xhr setRequestHeader  Content-Type    application json    xhr responseType    arraybuffer   xhr send json     The above will download file

User · Answer

The HTML Code -    lt button type  button  id  GetFile  gt Get File  lt  button gt     The jQuery Code -       GetFile   on  click   function            ajax           url   https   s3-us-west-2 amazonaws com s cdpn io 172905 test pdf           method   GET           xhrFields                responseType   blob                     success  function  data                var a   document createElement  a                var url   window URL createObjectURL data               a href   url              a download    myfile pdf               document body append a               a click                a remove                window URL revokeObjectURL url

User · Answer

It is certain that you can not do it through Ajax call   However  there is a workaround   Steps    If you are using form submit   for downloading the file  what you can do is     Create an ajax call from client to server and store the file stream inside the session  Upon  success  being returned from server  call your form submit   to just stream the file stream stored in the session    This is helpful in case when you want to decide whether or not file needs to be downloaded after making form submit    eg  there can be a case where on form submit    an exception occurs on the server side and instead of crashing  you might need to show a custom message on the client side  in such case this implementation might help

[javascript] Download a file by jQuery.Ajax

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to jsp

Examples related to download