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 ?

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 ?

• javascript
• angular
• pdf
• iframe
• ionic3

4 Answers 4

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

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)
}

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 ponent to show a PDF file in mobile. I used https://pdfviewer/ and it solved the issue.

I had a similar issue in Angular, which I resolved using the create object element with the help of javascript. hope this help.

.html

<div class="modal-body" id="preview-body">
</div>

.ts

this.pdfContent =
    URL.createObjectURL(this.b64toBlob(partPhoto, 'application/pdf')) +
    '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
  const obj = document.createElement('object');
  obj.setAttribute('id', 'preview-viewer');
  obj.setAttribute('data', this.pdfContent);
  obj.setAttribute('width', '100%');
  obj.setAttribute('height', '600px');
  document.getElementById('preview-body').appendChild(obj);


 b64toBlob(b64Data, contentType) {
    b64Data = b64Data.replace(/^[\w\d;:\/]+base64\,/g, '');
    const byteArray = Uint8Array.from(
      atob(b64Data)
      .split('')
      .map(char => char.charCodeAt(0))
      );
  return new Blob([byteArray], { type: 'application/pdf' });
 }