为什么此代码在 MacOS Big Sur Safari 上失败？

Question

我正在尝试使用 PDF 浏览器扩展程序在 MacOS Big Sur Safari 上进行 PDF 预览。

我们有一个返回文件数据的 .NET 框架 Web API。使用以下函数检索文件数据。

export class AttachmentService {
    constructor(
        private readonly api: ApiClient
    ) { }

    public getAttachmentContentObjectUrl(identifier: string): Observable<string> {
        return this.api.getFileData(identifier, null)
            .pipe(
                switchMap((file) => {
                    return of(window.URL.createObjectURL(file.data));
                })
            );
    }
}

我们将该函数称为如下：

export class PdfPreviewComponent implements OnInit {
    constructor(
        private readonly attachmentService: AttachmentService,
        private readonly domSanitizer: DomSanitizer
    ) {
    }

    public ngOnInit() {
        this.setPreviewPdfSrc(<some arbitrary id>);
    }

    private setPreviewPdfSrc(identifier: string) {
        let observable = this.attachmentService.getAttachmentContentObjectUrl(identifier);

        observable
            .subscribe(
                url => this.previewSrc = this.domSanitizer.bypassSecurityTrustResourceUrl(url),
                () => this.previewSrc = null);
    }
}

然后，我们使用对象元素中的 PreviewSrc 变量来加载浏览器 PDF 扩展。

<object id="preview" type="application/pdf" [data]="previewSrc">

但是，当在 MacOS Big Sur Safari 14 上执行此操作时，此代码会失败并挂起浏览器。

在 MacOS Big Sur 更新之前，一切运行良好。在 Big Sur 11.0、11.0.1 和 11.1 上测试。全部失败。当在相同 Big Sur 版本上的 Chrome 或 Safari 中运行它时，它可以正常工作。在其他操作系统/浏览器上没有问题。

这是 MacOS Big Sur 中的错误还是我做错了什么？我尝试解析 userAgent 字符串来规避此问题，但 Big Sur 11.0.1 返回 10.15.6 Catalina...

Answer 1

不幸的是我也遇到了同样的问题。不过，当使用 iframe 而不是对象元素时，似乎不会发生这种情况，因此我将其用作解决方法。

<iframe [src]="previewSrc"></iframe>

编辑：经过更多挖掘后，我注意到问题仅在添加属性时发生type="application/pdf"。删除该属性似乎也可以解决该问题。

为什么会发生这种情况，我仍然不清楚。

<object id="preview" [data]="previewSrc">

我为此在 Angular 存储库中创建了一个问题，但我不确定这是 Angular 特有的还是 Safari 的错误。