Opening PDF String in new window with javascript

Question

I have a formatted PDF string that looks like    PDF-1 73 0 obj lt  lt  lt   Type  Group  S  Transparency  CS  DeviceRGB  gt  gt   Resources 2 0 R Contents 4 0 R gt  gt  endobj4 0 obj lt  gt  streamx  R o 0       vL R   l -       Ge JK        Y5     Z k vf a   G    Asf z        aI     t   GD      lt      B b         00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer  lt  lt   Size 11  Root 10 0 R  Info 9 0 R  gt  gt startxref2015  EOF   I am trying to open up this string in a new window as a PDF file   Whenever I use window open   and write the string to the new tab it thinks that the text should be the contents of an HTML document   I want it to recognize that this is a PDF file   Any help is much appreciated

User · Answer

You might want to explore using the data URI. It would look something like.

window.open("data:application/pdf," + escape(pdfString));

I wasn't immediately able to get this to work, possible because formating of the binary string provided. I also usually use base64 encoded data when using the data URI. If you are able to pass the content from the backend encoded you can use..

window.open("data:application/pdf;base64, " + base64EncodedPDF);

Hopefully this is the right direction for what you need. Also note this will not work at all in IE6/7 because they do not support Data URIs.

User · Answer

An updated version of answer by  Noby Fujioka   function showPdfInNewTab base64Data  fileName        let pdfWindow   window open        pdfWindow document write   lt html lt head gt  lt title gt   fileName   lt  title gt  lt style gt body margin  0px  iframe border-width  0px   lt  style gt  lt  head gt       pdfWindow document write   lt body gt  lt embed width  100   height  100   src  data application pdf base64      encodeURI base64Data    toolbar 0 amp navpanes 0 amp scrollbar 0  gt  lt  embed gt  lt  body gt  lt  html gt

User · Answer

use function  printPreview binaryPDFData   to get print preview dialog of binary pdf data   printPreview    data  type    application pdf     gt        let blob   null      blob   this b64toBlob data  type       const blobURL   URL createObjectURL blob       const theWindow   window open blobURL       const theDoc   theWindow document      const theScript   document createElement  script        function injectThis             window print              theScript innerHTML    window onload     injectThis toString           theDoc body appendChild theScript       b64toBlob    content  contentType    gt        contentType   contentType            const sliceSize   512          method which converts base64 to binary     const byteCharacters   window atob content         const byteArrays           for  let offset   0  offset  lt  byteCharacters length  offset    sliceSize            const slice   byteCharacters slice offset  offset   sliceSize           const byteNumbers   new Array slice length           for  let i   0  i  lt  slice length  i                  byteNumbers i    slice charCodeAt i                     const byteArray   new Uint8Array byteNumbers           byteArrays push byteArray             const blob   new Blob byteArrays            type  contentType            statement which creates the blob     return blob

User · Answer

This one worked for me    window open  data application octet-stream charset utf-16le base64   data64     This one worked too   let a   document createElement  a     a href    data application octet-stream base64   data64   a download    documentName pdf   a click

User · Answer

var byteCharacters   atob response data   var byteNumbers   new Array byteCharacters length   for  var i   0  i  lt  byteCharacters length  i        byteNumbers i    byteCharacters charCodeAt i     var byteArray   new Uint8Array byteNumbers   var file   new Blob  byteArray     type   application pdf base64      var fileURL   URL createObjectURL file   window open fileURL     You return a base64 string from the API or another source  You can also download it

User · Answer

I just want to add with  Noby Fujioka s response  Edge will not support following  window open  data application pdf     encodeURI pdfString      For Edge we need to convert it to blob and this is something like following    If Browser is Edge             if  window navigator  amp  amp  window navigator msSaveOrOpenBlob                    var byteCharacters   atob  lt Your base64 Report Data gt                    var byteNumbers   new Array byteCharacters length                   for  var i   0  i  lt  byteCharacters length  i                          byteNumbers i    byteCharacters charCodeAt i                                     var byteArray   new Uint8Array byteNumbers                   var blob   new Blob  byteArray                         type   application pdf                                      window navigator msSaveOrOpenBlob blob   myreport pdf                  else                   var pdfWindow   window open       blank                    pdfWindow document write   lt iframe width  100   style  margin  -8px border  none   height  100   src  data application pdf base64      encodeURI  lt Your base64 Report Data gt        gt  lt  iframe gt

User · Answer

One suggestion is that use a pdf library like PDFJS   Yo have to append  the following  data application pdf base64    your pdf String  and set the src of your element to that   Try with this example   var pdfsrc    data application pdf base64     67987yiujkhkyktgiyuyhjhgkhgyi   n    lt pdf-element id  pdfOpen  elevation  5  downloadable src  pdfsrc   gt  lt  pdf-element gt    Hope it helps

User · Answer

for the latest Chrome version  this works for me    var win   window open      Title    toolbar no location no directories no status no menubar no scrollbars yes resizable yes width 780 height 200 top    screen height-400    left    screen width-840    win document body innerHTML    iframe width  100   height  100   src  data application pdf base64   base64   gt  lt  iframe gt      Thanks

User · Answer

I had this problem working with a FedEx shipment request   I perform the request with AJAX   The response includes tracking    cost  as well as pdf string containing the shipping label   Here s what I did   Add a form    lt form id  getlabel  name  getlabel  action  getlabel php  method  post  target   blank  gt   lt input type  hidden  id  pdf  name  pdf  gt   lt  form gt    Use javascript to populate the hidden field s value with the pdf string and post the form   Where getlabel php    lt   header  Content-Type  application pdf    header  Content-Length    strlen   POST  pdf      header  Content-Disposition  inline     header  Cache-Control  private  max-age 0  must-revalidate    header  Pragma  public    print   POST  pdf      gt

User · Answer

Just encode your formatted PDF string in base 64  Then you should do    pdf    data application pdf base64    base64EncodedString    return this to javascript and open in a new window   window open return

User · Answer

window open  data application pdf     escape pdfString       The above one pasting the encoded content in URL  That makes restriction of the content length in URL and hence PDF file loading failed  because of incomplete content

User · Answer

Just for information  the below  window open  data application pdf     encodeURI pdfString       does not work anymore in Chrome   Yesterday  I came across with the same issue and tried this solution  but did not work  it is  Not allowed to navigate top frame to data URL     You cannot open the data URL directly in a new window anymore  But  you can wrap it in iframe and make it open in a new window like below      let pdfWindow   window open     pdfWindow document write        lt iframe width  100   height  100   src  data application pdf base64          encodeURI yourDocumentBase64VarHere       gt  lt  iframe gt

User · Answer

for pdf view  let pdfWindow   window open      pdfWindow document write   lt iframe width  100   height  100   src  data application pdf base64     data data     gt  lt  iframe gt

User · Answer

I realize this is a pretty old question  but I had the same thing come up today and came up with the following solution   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 appendChild 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

Based off other old answers   escape   function is now deprecated    Use encodeURI   or encodeURIComponent   instead   Example that worked in my situation   window open  data application pdf     encodeURI pdfString       Happy Coding

[javascript] Opening PDF String in new window with javascript

Examples related to javascript

Examples related to pdf