Displayed a base64 encoded PDF file with iframe doesn't works

Question

I build an Ionic 3 app and I have to display some pdf file from base 64.

I tried to use to do this, but my displayed iframe is empty and I have this warning in my console :

Resource interpreted as Document but transferred with MIME type application/pdf: "data:application/pdf;base64,<base64>"

There is my html code :

<iframe [src]="ptools.dms.bypassSecurityTrustResourceUrl(content)" type="application/pdf"></iframe>

My iframe is totaly white. What I have to do to fix that ?

Answer 1

I had a similar problem with angular, I've never used Ionic but the solution I ended up was

HTML

<iframe #ManualFrame frameborder="0" allowfullscreen>
</iframe>

TS

    export class OpenSupportedFileComponent implements OnInit {
      @ViewChild('ManualFrame') documentElement: ElementRef;

      constructor(
        ) { }

      ngOnInit() { 
        this.documentElement.nativeElement.setAttribute("height", "100%");
        this.documentElement.nativeElement.setAttribute("width", "100%");
        this.documentElement.nativeElement.setAttribute("src", Base64StringWithMime);
      }
    }

If I remember correctly it didn't work when I was setting the value on the template

Answer 2

I just want to throw out what finally worked for me, using Angular 6. I've been fighting this for a day and a half, so I though I'd save anyone else like me some headache. Because of cross-site origin concerns, there is a lot of cracking down on "src" attributes. Hope this helps someone!

HTML

<span *ngIf="patient">
    <object *ngFor="let labRes of patient.labResult" [data]="domSanitize(labRes.src)" type="{{labRes.filetype}}" name="{{labRes.name}}" height="100%" width="100%"></object>
</span>

TS/JS

import { DomSanitizer } from '@angular/platform-browser';
...
domSanitize(src) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(src)
}

Answer 3

iFrame uses browsers capabilities to show it's contents. Unlike desktop version of most browsers, the mobile browsers don't have capability to show pdf files. For this reason, you will need a specific application or component to show a PDF file in mobile. I used https://pdfviewer.net/ and it solved the issue.