如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

Question

我正在尝试通过

<object>

标签在 Chrome 中显示 pdf。 如果我手动写

type

:

就可以了

<object [data]="getUrl(true)" type="application/pdf">
      Not working
</object>

但如果我从变量读取类型则不会：

<object [data]="getUrl(true)" [type]="file.mimeType">
            Not working
</object>

为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。

这里是plunkr。

它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (

Version 74.0.3729.169 (Official Build) (64-bit)

)：

Answer 1

我遇到了同样的问题，但我不明白原因。

就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。

<ng-template #blinkPlatformViewer>
  <embed [src]="getUrl(true)" [type]="file.mimeType"/>
</ng-template>

<object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType">
  Not working
</object>

import { Platform } from '@angular/cdk/platform';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

export class FileContentComponent {

constructor(private readonly sanitizer: DomSanitizer,
    private readonly platform: Platform)
  {
  }

  get isBlinkPlatform(): boolean {
    return this.platform.BLINK;
  }
}