在网络应用中查看Blob（图像，PDF或Doc）

Question

我正在尝试在有角度的Web应用程序中查看图像，pdf或doc文件。

ts代码：

this.fileService.getFile(fileId).subscribe(
    result => {
        let blob = new Blob([result[0].data], { type: result[0].type });
        this.FileType = result[0].type;
        this.FileUrl = window.URL.createObjectURL(blob);
    },
    error => {}
);

HTML：

<img    *ngIf="FileType.indexOf('image') != -1" [src]="FileUrl | safe: 'resourceUrl'">
<iframe *ngIf="FileType.indexOf('image') == -1" [src]="'https://drive.google.com/viewerng/viewer?embedded=true&url=' + FileUrl | safe: 'resourceUrl'" width="100%" height="100px"></iframe>

如果它是图像，则运行起来没有任何问题，但是对于pdf和doc文件，我会收到此错误：   

此代码在几个月前开始工作...

作为快速解决方案，我为有效的文件添加了下载按钮：

<a class="btn btn-primary" [href]="FileUrl | safe: 'resourceUrl'" download>Download file</a>

关于如何在有角度的Web应用程序中查看pdf或doc文件的任何建议（除了下载或在新标签页/窗口中打开之外）？