Download pdf file using jquery ajax

Question

I want to download a pdf file for jquery ajax response  Ajax response contains pdf file data  I tried this solution  My code is given below but I always get a blank pdf     document  on  click     download-ss-btn   function             ajax           type   POST           url   http   127 0 0 1 8080 utils json pdfGen           data                data  JSON stringify jsonData                    done function  data            var blob   new Blob  data            var link   document createElement  a            link href   window URL createObjectURL blob           link download    Sample pdf           link click

User · Answer

You can do this with html5 very easily  var link   document createElement  a    link href    quot  WWW test pdf quot   link download    quot file  quot    new Date      quot  pdf quot   link click    link remove

User · Answer

I am newbie and most of the code is from google search   I got my pdf download working with the code below  trial and error play   Thank you for code tips  xhrFields  above     ajax               cache  false              type   POST               url   yourURL               contentType  false              processData  false              data  yourdata                 xhrFields is what did the trick to read the blob to pdf             xhrFields                    responseType   blob                             success  function  response  status  xhr                     var filename                                          var disposition   xhr getResponseHeader  Content-Disposition                      if  disposition                        var filenameRegex    filename     n              2     n                          var matches   filenameRegex exec disposition                       if  matches     null  amp  amp  matches 1   filename   matches 1  replace       g                                          var linkelem   document createElement  a                    try                                              var blob   new Blob  response     type   application octet-stream                                                   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 target     blank                                   a click                                                            else                               window location   downloadUrl                                                                        catch  ex                        console log ex

User · Answer

For those looking a more modern approach  you can use the fetch API  The following example shows how to download a PDF 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 pdf         const downloadUrl   URL createObjectURL blob       const a   document createElement  a        a href   downloadUrl      a download    file pdf       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

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  Given that  you have one of two solutions   First solution  abandon JQuery and use XMLHTTPRequest  Go with the native HTMLHTTPRequest  here is the code to do what you need    var req   new XMLHttpRequest      req open  GET     file pdf   true     req responseType    blob      req onload   function  event        var blob   req response      console log blob size       var link document createElement  a        link href window URL createObjectURL blob       link download  Dossier     new Date       pdf       link click            req send      Second solution  use the jquery-ajax-native plugin  The plugin can be found here and can be used to the XHR V2 capabilities missing in JQuery  here is a sample code how to use it    ajax     dataType   native     url    file pdf     xhrFields        responseType   blob         success  function blob       console log blob size         var link document createElement  a          link href window URL createObjectURL blob         link download  Dossier     new Date       pdf         link click

[javascript] Download pdf file using jquery ajax

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to pdf