Download and open PDF file using Ajax

Question

I have an action class that generates a PDF  The contentType is set appropriately   public class MyAction extends ActionSupport       public String execute                         File report   signedPdfExporter generateReport xyzData  props        inputStream   new FileInputStream report       contentDisposition    attachment       report getName               contentType    application pdf       return SUCCESS           I call this action  through an Ajax call  I don t know the way to deliver this stream to browser  I tried a few things but nothing worked     ajax       type   POST       url  url      data  wireIdList      cache  false      success  function response                alert  got response            window open response              error  function  XMLHttpRequest  textStatus  errorThrown                 alert  Error occurred while opening fax template                   getAjaxErrorString textStatus  errorThrown                The above gives the error      Your browser sent a request that this server could not understand

User · Answer

To fix the blank PDF issue in post request to get stream data like PDF  we need to add response type as  arraybuffer  or  blob  in request    ajax     url    lt URL gt      type   POST     dataType   arraybuffer     success  function data        let blob   new Blob  data    type   arraybuffer         let link   document createElement  a        let objectURL   window URL createObjectURL blob       link href   objectURL      link target     self       link download    fileName pdf        document body    document documentElement  appendChild link       link click        setTimeout     gt           window URL revokeObjectURL objectURL           link remove           100

User · Answer

Concerning the answer given by Mayur Padshala this is the correct logic to download a pdf file via ajax but as others report in the comments this solution is indeed downloads a blank pdf   The reason for this is explained in the accepted answer of this question  jQuery has some issues loading binary data using AJAX requests  as it does not yet implement some HTML5 XHR v2 capabilities  see this enhancement request and this discussion   So using HTMLHTTPRequest the code should look like this   var req   new XMLHttpRequest    req open  POST    URL   true   req responseType    blob   req onload   function  event        var blob   req response      var link document createElement  a        link href window URL createObjectURL blob       link download  name for the file to save with extention       link click

User · Answer

Do you have to do it with Ajax  Coouldn t it be a possibility to load it in an iframe

User · Answer

If you have to work with file-stream  so no physically saved PDF  like we do and you want to download the PDF without page-reload  the following function works for us   HTML   lt div id  download-helper-hidden-container  style  display none  gt        lt form id  download-helper-form  target  pdf-download-output  method  post  gt               lt input type  hidden  name  downloadHelperTransferData  id  downloadHelperTransferData    gt        lt  form gt        lt iframe id  pdf-helper-output  name  pdf-download-output  gt  lt  iframe gt   lt  div gt    Javascript  var form   document getElementById  download-helper-form        downloadHelperTransferData   val transferData   form action    ServerSideFunctionWhichWritesPdfBytesToResponse   form submit      Due to the target  pdf-download-output   the response is written into the iframe and therefore no page reload is executed  but the pdf-response-stream is output in the browser as a download

User · Answer

You don t necessarily need Ajax for this  Just an  lt a gt  link is enough if you set the content-disposition to attachment in the server side code  This way the parent page will just stay open  if that was your major concern  why would you unnecessarily have chosen Ajax for this otherwise    Besides  there is no way to handle this nicely acynchronously  PDF is not character data  It s binary data  You can t do stuff like   element  load    You want to use completely new request for this  For that  lt a href  pdfservlet filename pdf  gt pdf lt  a gt  is perfectly suitable   To assist you more with the server side code  you ll need to tell more about the language used and post an excerpt of the code attempts

User · Answer

I don t really think that any of the past answers spotted out the problem of the original poster  They all presume a GET request while the poster was trying to POST data and get a download in response   In the course of searching for any better answer we found this jQuery Plugin for Requesting Ajax-like File Downloads   In its  heart  it creates a  temporary  HTML form containing the given data as input fields  This form is appended to the document and posted to the desired URL  Right after that the form is removed again   jQuery   lt form action     url     method      method   post       gt   inputs   lt  form gt         appendTo  body   submit   remove     Update Mayur s answer looks pretty promising and very simple in comparison to the jQuery plug-in I referred to

User · Answer

Hope this will save you a few hours and spare you from a headache  It took me a while to figure this out  but doing regular   ajax   request ruined my PDF file  while requesting it through address bar worked perfectly  Solution was this   Include download js  http   danml com download html  Then use XMLHttpRequest instead of   ajax   request       var ajax   new XMLHttpRequest          ajax open  GET     Admin GetPdf    id  true        ajax onreadystatechange   function data             if  this readyState    4                        if  this status    200                                download this response   report pdf    application pdf                               else if  this responseText                                      alert this responseText                                   else if  this readyState    2                        if  this status    200                                this responseType    blob                             else                               this responseType    text                                       ajax send null

User · Answer

x000D   x000D  var xhr  x000D  var beforeSend   function    x000D          pleasewaitDL   modal  show    x000D    x000D    function      x000D          print brochure link   click function    x000D          beforeSend    x000D          xhr   new XMLHttpRequest    x000D          xhr open  GET      preparedPrintModalForm   attr  action    true    x000D          xhr responseType    blob   x000D          xhr onload   function  e    x000D              if  this status     200    x000D                  var file   window URL createObjectURL this response   x000D                  var a   document createElement  a    x000D                  a href   file  x000D                  a download   this response name     Property Brochure   x000D                  console log file   x000D                  document body appendChild a   x000D                  a click    x000D                   x000D                  window onfocus   function                           x000D                    document body removeChild a  x000D                    x000D                      pleasewaitDL   modal  hide    x000D                 x000D             x000D          xhr send     preparedPrintModalForm   serialize     x000D          x000D          pleasewaitDLCancel   click function     x000D          xhr abort    x000D          x000D      x000D   x000D   x000D

User · Answer

Here is how I got this working  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   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  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

You could use this plugin which creates a form  and submits it  then removes it from the page   jQuery download   function url  data  method          url and data options required     if  url  amp  amp  data              data can be string of parameters or array object         data   typeof data     string    data   jQuery param data             split params into form inputs         var inputs               jQuery each data split   amp     function                 var pair   this split                   inputs      lt input type  hidden  name      pair 0                       value      pair 1         gt                          send request         jQuery   lt form action      url                      method       method     post        gt     inputs     lt  form gt                 appendTo  body   submit   remove                  download        export php        filename mySpreadsheet amp format xls amp content     spreadsheetData      This worked for me  Found this plugin here

User · Answer

What worked for me is the following code  as the server function is retrieving  File memoryStream GetBuffer     application pdf    fileName pdf       http get  fullUrl    responseType   arraybuffer                  success function  response                    var blob   new Blob  response     type   application pdf                       if  window navigator  amp  amp  window navigator msSaveOrOpenBlob                        window navigator msSaveOrOpenBlob blob      for IE                                   else                       var fileURL   URL createObjectURL blob                       var newWin   window open fileURL                       newWin focus                        newWin reload

User · Answer

The following code worked for me    Parameter to be passed var data    reportid R3823 amp isSQL 1 amp filter      var xhr   new XMLHttpRequest    xhr open  POST    Reporting jsp      url It can pdf file path xhr setRequestHeader  Content-type    application x-www-form-urlencoded    xhr responseType    blob   xhr onload   function          if  this status     200            var blob   new Blob  xhr response            const url   window URL createObjectURL blob           var a   document createElement  a            a href   url          a download    myFile pdf           a click            setTimeout function                     For Firefox it is necessary to delay revoking the ObjectURL             window URL revokeObjectURL data                    100                     xhr send data

User · Answer

This is how i solve this issue  The answer of Jonathan Amend on this post helped me a lot  The example below is simplified     For more details  the above source code is able to download a file using a JQuery Ajax request  GET  POST  PUT etc   It  also  helps to upload parameters as JSON and to change the content type to application json  my default    The html source      lt form method  POST  gt       lt input type  text  name  startDate   gt       lt input type  text  name  endDate   gt       lt input type  text  name  startDate   gt       lt select name  reportTimeDetail  gt           lt option value  1  gt 1 lt  option gt       lt  select gt       lt button type  submit  gt  Submit lt  button gt   lt  form gt      A simple form with two input text  one select and a button element   The javascript page source    lt script type  text javascript  src  JQuery 1 11 0 link  gt  lt  script gt   lt script type  text javascript  gt         File Download on form submition        document  on  ready   function               form button   on  click   function  event                event stopPropagation       Do not propagate the event                  Create an object that will manage to download the file              new AjaxDownloadFile                   url   url that returns a file                   data  JSON stringify    form   serializeObject                                 return false     Do not submit the form                       lt  script gt      A simple event on button click  It creates an AjaxDownloadFile object  The AjaxDownloadFile class source is below     The AjaxDownloadFile class source     var AjaxDownloadFile   function  configurationSettings           Standard settings      this settings                JQuery AJAX default attributes          url              type   POST           headers                 Content-Type    application json  charset UTF-8                     data                 Custom events          onSuccessStart  function  response  status  xhr  self                       onSuccessFinish  function  response  status  xhr  self  filename                       onErrorOccured  function  response  status  xhr  self                         this download   function              var self   this            ajax               type  this settings type              url  this settings url              headers  this settings headers              data  this settings data              success  function  response  status  xhr                       Start custom event                  self settings onSuccessStart response  status  xhr  self                       Check if a filename is existing on the response headers                  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 type   xhr getResponseHeader  Content-Type                    var blob   new Blob  response    type  type                     if  typeof window navigator msSaveBlob      undefined                            IE workaround for  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                      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  a                               Safari doesn t support this yet                          if  typeof a download      undefined                                 window location   downloadUrl                            else                               a href   downloadUrl                              a download   filename                              document body appendChild a                               a click                                                    else                           window location   downloadUrl                                             setTimeout function                              URL revokeObjectURL downloadUrl                          100      Cleanup                                       Final custom event                  self settings onSuccessFinish response  status  xhr  self  filename                              error  function  response  status  xhr                       Custom event to handle the error                  self settings onErrorOccured response  status  xhr  self                                           Constructor                   Merge settings            extend this settings  configurationSettings              Make the request          this download               I created this class to added to my JS library  It is reusable  Hope that helps

User · Answer

create a hidden iframe  then in your ajax code above   url  document getElementById  myiframeid   src   your server side url   and remove the window open response

User · Answer

This snippet is for angular js users which will face the same problem  Note that the response file is downloaded using a programmed click event  In this case   the headers were sent by server containing filename and content type    http       method   POST        url   DownloadAttachment URL       data     fileRef    filename pdf       I m sending filename as a param     headers     Authorization    localStorage jwt     undefined   jwt    localStorage jwt        responseType   arraybuffer      success function  data  status  headers  config        headers   headers        var filename   headers  x-filename        var contentType   headers  content-type        var linkElement   document createElement  a        try           var blob   new Blob  data     type  contentType             var url   window URL createObjectURL blob            linkElement setAttribute  href   url           linkElement setAttribute  download   filename            var clickEvent   new MouseEvent  click                  view   window               bubbles   true               cancelable   false                     linkElement dispatchEvent clickEvent         catch  ex            console log ex            error function  data  status  headers  config       finally function

[javascript] Download and open PDF file using Ajax

Examples related to javascript

Examples related to java

Examples related to jquery

Examples related to pdf