How to build PDF file from binary string returned from a web-service using javascript

Question

I am trying to build a PDF file out of a binary stream which I receive as a response from an Ajax request   Via XmlHttpRequest I receive the following data    PDF-1 4               hole data representing the file         EOF   What I tried so far was to embed my data via data uri  Now  there s nothing wrong with it and it works fine  Unfortunately  it does not work in IE9 and Firefox  A possible reason may be that FF and IE9 have their problems with this usage of the data-uri   Now  I m looking for any solution that works for all browsers  Here s my code      responseText encoding  pdfText     base64 decode   trim pdfText        Now pdfText contains  PDF-1 4        data         EOF  var winlogicalname    detailPDF   var winparams    dependent yes locationbar no scrollbars yes menubar yes                 resizable screenX 50 screenY 50 width 850 height 1050    var htmlText     lt embed width 100  height 100                            type  application pdf                            src  data application pdf                          escape pdfText                            gt  lt  embed gt                         Open PDF in new browser window                 var detailWindow   window open      winlogicalname  winparams                   detailWindow document write htmlText                   detailWindow document close      As I have said  it works fine with Opera and Chrome  Safari hasn t been tested   Using IE or FF will bring up a blank new window   Is there any solution like building a PDF file on a file system in order to let the user download it  I need the solution that works in all browsers  at least in IE  FF  Opera  Chrome and Safari   I have no permission to edit the web-service implementation  So it had to be a solution at client-side  Any ideas

User · Answer

I changed this   var htmlText     lt embed width 100  height 100                        type  application pdf                        src  data application pdf                      escape pdfText                        gt  lt  embed gt       to  var htmlText     lt embed width 100  height 100                        type  application pdf                        src  data application pdf base64                      escape pdfText                        gt  lt  embed gt       and it worked for me

User · Answer

I saw another question on just this topic recently  streaming pdf into iframe using dataurl only works in chrome    I ve constructed pdfs in the ast and streamed them to the browser  I was creating them first with fdf  then with a pdf class I wrote myself - in each case the pdf was created from data retrieved from a COM object based on a couple of of GET params passed in via the url   From looking at your data sent recieved in the ajax call  it looks like you re nearly there  I haven t played with the code for a couple of years now and didn t document it as well as I d have cared to  but - I think all you need to do is set the target of an iframe to be the url you get the pdf from  Though this may not work - the file that oututs the pdf may also have to outut a html response header first   In a nutshell  this is the output code I used     We send to a browser header  Content-Type  application pdf    if headers sent         this- gt Error  Some data has already been output  can  t send PDF file    header  Content-Length    strlen  this- gt buffer    header  Content-Disposition  inline  filename     name       header  Cache-Control  private  max-age 0  must-revalidate    header  Pragma  public    ini set  zlib output compression   0    echo  this- gt buffer    So  without seeing the full response text fro the ajax call I can t really be certain what it is  though I m inclined to think that  the code that outputs the pdf you re requesting may only be doig the equivalent of the last line in the above code  If it s code you have control over  I d try setting the headers - then this way the browser can just deal with the response text - you  don t have to bother doing a thing to it   I simply constructed a url for the pdf I wanted  a timetable  then created a string that represented the html for an iframe of the desired sie  id etc that used the constructed url as it s src  As soon as I set the inner html of a div to the constructed html string  the browser asked for the pdf and then displayed it when it was received   function  showPdfTt studentId        var url  tgt      title   byId  popupTitle        title innerHTML    Timetable for     studentId      tgt   byId  popupContent        url    pdftimetable php        url     id   studentId      url      amp type Student       tgt innerHTML     lt iframe onload   centerElem byId  box      src    url    width   700px   height   500px   gt  lt  iframe gt        EDIT  forgot to mention - you can send binary pdf s in this manner  The streams they contain don t need to be ascii85 or hex encoded  I used flate on all the streams in the pdf and it worked fine

User · Answer

Is there any solution like building a pdf file on file system in order   to let the user download it    Try setting responseType of XMLHttpRequest to blob   substituting  download attribute at a element for window open to allow download of response from XMLHttpRequest as  pdf file  var request   new XMLHttpRequest    request open  GET     path to pdf   true    request responseType    blob   request onload   function  e        if  this status     200                blob  response         console log this response              create  objectURL  of  this response      pdf  as  Blob          var file   window URL createObjectURL this response           var a   document createElement  a            a href   file          a download   this response name     detailPDF           document body appendChild a           a click               remove  a  following  Save As  dialog               window  regains  focus          window onfocus   function                                     document body removeChild a                      request send

User · Answer

I work in PHP and use a function to decode the binary data sent back from the server  I extract the information an input to a simple file php and view the file through my server and all browser display the pdf artefact    lt  php     data    dfjhdfjhdfjhdfjhjhdfjhdfjhdfjhdfdfjhdf  blah   blah   blah         data   base64 decode  data       header  Content-type  application pdf        header  Content-Length     strlen  data         header  Content-Disposition  inline  filename label pdf        print  data      exit 1      gt

User · Answer

The answer of  alexandre with base64 does the trick   The explanation why that works for IE is here  https   en m wikipedia org wiki Data URI scheme  Under header  format  where it says     Some browsers  Chrome  Opera  Safari  Firefox  accept a non-standard   ordering if both  base64 and  charset are supplied  while Internet   Explorer requires that the charset s specification must precede the   base64 token

User · Answer

I realize this is a rather old question  but here s the solution I came up with today   doSomethingToRequestData   then function downloadedFile         create a download anchor tag   var downloadLink        document createElement  a      downloadLink target       blank     downloadLink download    name to give saved file pdf         convert downloaded data to a Blob   var blob   new Blob  downloadedFile data     type   application pdf            create an object URL from the Blob   var URL   window URL    window webkitURL    var downloadUrl   URL createObjectURL blob         set object URL as the anchor s href   downloadLink href   downloadUrl        append the anchor to document body   document body append downloadLink         fire a click event on the anchor   downloadLink click          cleanup  remove element and revoke object URL   document body removeChild downloadLink     URL revokeObjectURL downloadUrl

User · Answer

You can use PDF js to create PDF files from javascript    it s easy to code    hope this solve your doubt     Regards

User · Answer

Detect the browser and use Data-URI for Chrome and use PDF js as below for other browsers   PDFJS getDocument url of pdf   then function pdf        return pdf getPage 1       then function page           get a viewport     var scale   1 5      var viewport   page getViewport scale          get or create a canvas     var canvas            canvas width   viewport width      canvas height   viewport height          render a page     page render           canvasContext  canvas getContext  2d            viewport  viewport             catch function err           deal with errors here

[javascript] How to build PDF file from binary string returned from a web-service using javascript

Examples related to javascript

Examples related to jquery

Examples related to pdf

Examples related to cross-browser

Examples related to binary-data