How to Display blob pdf in an AngularJS app

Question

I have been trying to display pdf file which I am getting as a blob from a  http post response  The pdf must be displayed within the app using  lt embed src gt  for example   I came across a couple of stack posts but somehow my example doesn t seem to work   JS   According to this doc  I went on and tried      http post   postUrlHere   myParams   success function  response     var file   new Blob  response    type   application pdf      var fileURL   URL createObjectURL file     scope content   fileURL        Now from what I understand  fileURL creates a temporary URL that the blog can use as a reference   HTML    lt embed src    content    width  200  height  200  gt  lt  embed gt    I am not sure how to handle this in Angular  the ideal situation would be to  1  assign it to a scope   2   prepare rebuild  the blob to a pdf  3  pass it to the HTML using  lt embed gt  because I want to display it within the app   I have been researching for more than a day now but somehow I can t seem to understand how this works in Angular    And let s just assume the pdf viewer libraries out there weren t an option

User · Answer

Adding responseType to the request that is made from angular is indeed the solution  but for me it didn t work until I ve set responseType to blob  not to arrayBuffer  The code is self explanatory        http               method    GET               url    api paperAttachments download     id              responseType   blob             then function successCallback response                console log response                var blob   new Blob  response data                 FileSaver saveAs blob  getFileNameFromHttpResponse response               function errorCallback response

User · Answer

First of all you need to set the responseType to arraybuffer  This is required if you want to create a blob of your data  See Sending and Receiving Binary Data  So your code will look like this    http post   postUrlHere   myParams    responseType  arraybuffer       success function  response           var file   new Blob  response    type   application pdf            var fileURL   URL createObjectURL file         The next part is  you need to use the  sce service to make angular trust your url  This can be done in this way    scope content    sce trustAsResourceUrl fileURL     Do not forget to inject the  sce service   If this is all done you can now embed your pdf    lt embed ng-src    content    style  width 200px height 200px   gt  lt  embed gt

User · Answer

A suggestion of code that I just used in my project using AngularJS v1 7 2   http get  LabelsPDF ids     ids    responseType   arraybuffer                  then function  response                    var file   new Blob  response data     type   application pdf                      var fileURL   URL createObjectURL file                    scope ContentPDF    sce trustAsResourceUrl fileURL                     lt embed ng-src    ContentPDF    type  application pdf  class  col-xs-12  style  height 100px  text-align center     gt

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  xxxxController   function   scope  xxxxServicePDF             scope downloadPdf   function                  var fileName    test pdf               var a   document createElement  a                document body appendChild a               a style    display  none               xxxxServicePDF 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  xxxxServicePDF   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

michael s suggestions works like a charm for me    If you replace  http post with  http get  remember that the  get method accepts 2 parameters instead of 3    this is where is wasted my time        controller    http get   getdoc      stateParams id        responseType  arraybuffer       success function  response         var file   new Blob   response     type   application pdf          var fileURL   URL createObjectURL file         scope content    sce trustAsResourceUrl fileURL         view    lt object ng-show  content  data    content    type  application pdf  style  width  100   height  400px   gt  lt  object gt

User · Answer

I have struggled for the past couple of days trying to download pdfs and images all I was able to download was simple text files   Most of the questions have the same components  but it took a while to figure out the right order to make it work   Thank you  Nikolay Melnikov  your comment reply to this question was what made it work   In a nutshell  here is my AngularJS Service backend call     getDownloadUrl fileID                Get the download url of the file     let fullPath   this paths downloadServerURL   fileId                return the file as arraybuffer      return this  http get fullPath          headers             Authorization    Bearer     this sessionService getToken                  responseType   arraybuffer                From my controller   downloadFile       myService getDownloadUrl idOfTheFile  then   response    gt            Create a new blob object       let myBlobObject new Blob  response data    type  application pdf              Ideally the mime type can change based on the file extension         let myBlobObject new Blob  response data    type  mimeType           var url   window URL    window webkitURL       var fileURL   url createObjectURL myBlobObject         var downloadLink   angular element   lt a gt  lt  a gt           downloadLink attr  href  fileURL         downloadLink attr  download  this myFilesObj documentId  name         downloadLink attr  target    self          downloadLink 0  click     call click function       url revokeObjectURL fileURL    revoke the object from URL

User · Answer

I faced difficulties using  window URL  with Opera Browser as it would result to  undefined   Also  with window URL  the PDF document never opened in Internet Explorer and Microsoft Edge  it would remain waiting forever   I came up with the following solution that works in IE  Edge  Firefox  Chrome and Opera  have not tested with Safari     http post postUrl  data   responseType   arraybuffer     success success  error failed    function success data       openPDF data data   myPDFdoc pdf        function failed error          function openPDF resData  fileName        var ieEDGE   navigator userAgent match  Edge g       var ie   navigator userAgent match   NET g      IE 11      var oldIE   navigator userAgent match  MSIE g         var blob   new window Blob  resData     type   application pdf           if  ie    oldIE    ieEDGE           window navigator msSaveBlob blob  fileName             else          var reader   new window FileReader           reader onloadend   function                window location href   reader result                   reader readAsDataURL blob             Let me know if it helped

User · Answer

Most recent answer  for Angular 8     this http post  your-url  params  responseType  arraybuffer  as  json    subscribe     res    gt        this showpdf res            public Content SafeResourceUrl  showpdf response ArrayBuffer      var file   new Blob  response    type   application pdf       var fileURL   URL createObjectURL file     this Content   this sanitizer bypassSecurityTrustResourceUrl fileURL        HTML       lt embed  src   Content  style  width 200px height 200px   type  application pdf    gt

[angularjs] How to Display blob (.pdf) in an AngularJS app

Examples related to angularjs

Examples related to pdf

Examples related to blob