how to show pdf in iframe from blob in angular6?

Question

I need some help, I dont have any idea how to convert blob to pdf and show it in iframe I got this response from BackEnd (not copy all)

PK

! Gæ2[Content_Types].xml´Ko!÷úFl+§ªª<Î¢©6RS©[wlá!¸Nâß;O5éÈLk³i¸s>X_?ºxµ³%»Z®XV:¥í®d?o¿,Þ³"¢°JÔÎBÉÙõæõ«õíÑC,HmcÉöþçQîÁ¸t,U*@z ;î¼;àoW«w\:qÛ¬?A%5¨¹#!9+>vý¨ ïk-R7U>©»ó°{!Ô¦ nÓo§%Mû´"@Oà=Xõbýø¤lûÄ½öñM?ï´A+(nDÀoÂtAqåäÁPÄòôtLä¹ªÒF}ãæ#¬©cÅmOqÈCDg~ksWgã¦Ô{0[DùÉ5ÄËt¾éx@$AÞ9ðÛÙ(þ0OTÎ¡uc5Fë$XapN"HgólvT ò¡ I¤=áüê/ÎxÖ×%¿3Oyb[CÞ: áÁùo2é6ÝóühmNERÏöt¤¿!üÇB£^øYÇâHÖgú?ë_³»£üB7áÏ6¯*ãÖGæoo¼ßÿÿPK !¿@ar_rels/.rels¬ÛJÄ0ïß!ä~îz@dÓ½aïDêÉ´6©î¾½qµ°Ô{>¾Éz³³={Ãw/3tÊkãZÉêûÅ gÀiè½CÉ÷ø¦:?[?bRgBbâäQ¸"©-¤Ât¹Óøhò1¶"zÅª,¯EüÍàÕÉ¶Zò¸ÕÕûÿcò!æéH&ßÕ[$ÉµW¹"¹8.tyºo£ðÎ«Á¢£c^¸#tõ´0et5§yûÇ)¥åJãÄÏ»Zè¯òÍjÞ7DÝ`þÈj¾{ÅKÀöSH~JõÿÿPK !

all i have tried is use

this._endpointService.getData('/myGet')
           .then((res:any) => {
            let blob = new Blob([res.error.text], { type: 'application/pdf' })
            var fileURL = URL.createObjectURL(blob);

            this.tryDoctype = blob
})

then i dont know what's next i must do.

Your variable `fileURL` should contain the URL of the PDF file. You will need this to display the PDF. — JSON Derulo, Apr 11 '19 at 06:32
sorry, ng2-pdf-viewer didnt help me at all.. :( i get pdf file as the blob type like at the top top. am i doing right at my question? or i am totaly wrong how to do it? — yudistira nugraha, Apr 11 '19 at 06:50
Possible duplicate of [Display blob (.pdf) in an angular app](https://stackoverflow.com/questions/21628378/display-blob-pdf-in-an-angular-app) — Maxime, Apr 11 '19 at 06:57

score 1 · Answer 1 · edited Sep 15 '22 at 18:36

Please try below:

//import this ref
this._endpointService.getData('/myGet')
           .then((res:any) => {
    //change in response
    let blob = new Blob([res.error.text.blob()], { type: 'application/pdf' })
    let fileURL = URL.createObjectURL(blob);

    //if you have any error then try this
    //this.tryDoctype = this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);

    this.tryDoctype = fileURL;
})

Assign fileURL to Iframe

  <iframe *ngIf="tryDoctype" [src]="tryDoctype" width="950" height="600"></iframe>

how to show pdf in iframe from blob in angular6?

1 Answers1