PDF Blob - Pop up window not showing content

Question

I have been working on this problem for the last few days  With no luck on trying to display the stream on  lt embed src gt  tag  I just tried to display it on a new window   The new window shows PDF controls only     Any idea why the content of the pdf is not showing   CODE    http post   fetchBlobURL   myParams   success function  data        var file   new Blob  data    type   application pdf         var fileURL   URL createObjectURL file       window open fileURL

User · Accepted Answer

You need to set the responseType to arraybuffer if you would like to create a blob from your response data    http post   fetchBlobURL   myParams    responseType   arraybuffer        success function  data           var file   new Blob  data    type   application pdf            var fileURL   URL createObjectURL file          window open fileURL         more information  Sending and Receiving Binary Data

User · Answer

I used this code with the fpdf library     Este c  digo lo us   con la libreria fpdf   var datas   json1  var xhr   new XMLHttpRequest    xhr open  quot POST quot    quot carpeta archivo php quot    xhr setRequestHeader  quot Content-type quot    quot application x-www-form-urlencoded quot    xhr responseType    quot blob quot   xhr onload   function          if  this status     200            var blob   new Blob  xhr response    type   application pdf             const url   window URL createObjectURL blob           window open url  quot  blank quot            setTimeout function                     For Firefox it is necessary to delay revoking the ObjectURL             window URL revokeObjectURL datas                    100                     xhr send  quot men  quot  datas

User · Answer

problem is  it is not converted to proper format  Use function  printPreview binaryPDFData   to get print preview dialog of binary pdf data  you can comment script part if you don t want print dialog open   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

I use AngularJS v1 3 4  HTML    lt button ng-click  downloadPdf    class  btn btn-primary  gt download PDF lt  button gt    JS controller    use strict   angular module  xxxxxxxxApp        controller  MathController   function   scope  MathServicePDF             scope downloadPdf   function                  var fileName    test pdf               var a   document createElement  a                document body appendChild a               MathServicePDF downloadPdf   then function  result                    var file   new Blob  result data    type   application pdf                     var fileURL   window URL createObjectURL file                   a href   fileURL                  a download   fileName                  a click                                     JS services   angular module  xxxxxxxxApp        factory  MathServicePDF   function   http            return               downloadPdf  function                  return  http get  api downloadPDF     responseType   arraybuffer     then function  response                    return response                                         Java REST Web Services - Spring MVC    RequestMapping value     downloadPDF   method   RequestMethod GET  produces    application pdf       public ResponseEntity lt byte   gt  getPDF             FileInputStream fileStream          try               fileStream   new FileInputStream new File  C   xxxxx  xxxxxx  test pdf                 byte   contents   IOUtils toByteArray fileStream               HttpHeaders headers   new HttpHeaders                headers setContentType MediaType parseMediaType  application pdf                 String filename    test pdf               headers setContentDispositionFormData filename  filename               ResponseEntity lt byte   gt  response   new ResponseEntity lt byte   gt  contents  headers  HttpStatus OK               return response            catch  FileNotFoundException e               System err println e             catch  IOException e                System err println e                     return null

User · Answer

If you set   responseType   blob     no need to create Blob on your own  You can simply create url based with response content    http       url             method   POST       responseType   blob     then function response        var fileURL   URL createObjectURL response data       window open fileURL

User · Answer

I ended up just downloading my pdf using below code  function downloadPdfDocument fileName    var req   new XMLHttpRequest    req open  POST     pdf     fileName  true   req responseType    blob   fileName          new Date       pdf    req onload   function  event         var blob   req response         for IE     if  window navigator  amp  amp  window navigator msSaveOrOpenBlob            window navigator msSaveOrOpenBlob blob  fileName         else            var link   document createElement  a            link href   window URL createObjectURL blob           link download   fileName          link click              req send

User · Answer

I have been struggling for days finally the solution which worked for me is given below  I had to make the window print   for PDF in new window needs to work    var xhr   new XMLHttpRequest          xhr open  GET   pdfUrl  true         xhr responseType    blob          xhr onload   function e            if  this  status      200                        var blob   new Blob  this  response      type   application pdf               var url   URL createObjectURL blob             var printWindow   window open url       width 800 height 500              printWindow print                             xhr send      Some notes on loading PDF  amp  printing in a new window    Loading pdf in a new window via an iframe will work  but the print will not work if url is an external url  Browser pop ups must be allowed  then only it will work  If you try to load iframe from external url and try window print   you will get empty print or elements which excludes iframe  But you can trigger print manually  which will work

[javascript] PDF Blob - Pop up window not showing content

Examples related to javascript

Examples related to angularjs

Examples related to pdf