Question

我构建了一个Ionic 3应用程序，我必须从base 64显示一些pdf文件。

我尝试使用这样做，但我显示的iframe为空，我在控制台中发出此警告：

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

有我的HTML代码：

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

我的iframe完全是白色的。我需要做些什么才能解决这个问题？

Answer 1

我有一个类似角度的问题，我从未使用过Ionic，但我最终解决的问题是

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

如果我没记错，当我在模板上设置值

时，它不起作用

Answer 2

我只想使用Angular 6扔掉最后对我有用的东西。我已经为此奋斗了一天半，所以尽管我会让我这样的其他人省些头痛。由于存在跨站点起源的问题，因此对“ src”属性进行了很多打击。希望这对某人有帮助！

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使用浏览器功能来显示其内容。与大多数浏览器的桌面版本不同，移动浏览器不具有显示pdf文件的功能。因此，您将需要特定的应用程序或组件才能在移动设备中显示PDF文件。我使用了https://pdfviewer.net/，它解决了这个问题。

使用iframe显示base64编码的PDF文件不起作用

3 个答案: