在新的 Chrome 选项卡中打开 PDF Blob (Angular 2)答案

【问题标题】：Opening a PDF Blob in a new Chrome tab (Angular 2)在新的 Chrome 选项卡中打开 PDF Blob (Angular 2)
【发布时间】：2017-08-06 06:32:30
【问题描述】：

我正在按如下方式加载 PDF（我使用的是 Angular 2，但我不确定这是否重要..）：

//Inside a service class
downloadPdf = (id): Observable<Blob> => {
    let headers = new Headers();
    headers.append("Accept", "application/pdf");
    return this.AuthHttp.get(this.pdfURL + id, {
        headers: headers,
        responseType: ResponseContentType.Blob
    }).map(res => new Blob([res.blob()], {type: "application/pdf"}));
}

//Inside a click handler
this.pdfService.downloadPdf(this.id).subscribe((data: Blob) => {
        let fileURL = window.URL.createObjectURL(data);
        window.open(fileURL);
    });

此代码在 Firefox 中运行良好。在 Chrome 中，新标签页会短暂闪烁打开和关闭。当我调试并手动将 surf 到对象 URL 时，Chrome 可以正常打开它。

我在这里做错了什么？

【问题讨论】：

你有 AdBlock Plus 或任何其他类型的广告块扩展的机会吗？我在使用几乎相同的代码时遇到了同样的问题，但在禁用 AdBlock Plus 后问题就消失了。

标签： google-chrome angular pdf

【解决方案1】：

新标签页的打开被广告拦截器阻止。

【讨论】：

【解决方案2】：

它不能工作，新的弹出窗口将被浏览器阻止，因为它是从不是trusted event的回调创建的，要使其工作必须直接从点击处理程序调用，或者你必须禁用阻塞浏览器中的弹出窗口。

只有在 ajax 调用在不到一秒的时间内返回时，Chrome 才会允许它按需要工作。 More there

【讨论】：

我更喜欢 Adblock 方法，而不是制作单独的点击处理程序
我对这种情况很感兴趣。我不能保证我的客户不会有 addblock。我必须创建一个 pdf blob 将以任何方式打开的情况。