在新标签角 4 中打开 PDF 文件？答案

【问题标题】：Opening PDF file in new tab angular 4?在新标签角 4 中打开 PDF 文件？
【发布时间】：2018-12-14 16:50:15
【问题描述】：

我尝试使用window.open() 打开 PDF 文件，但窗口会自动打开和关闭，并且文件会像任何其他文件一样被下载。如何使pdf文件在新标签页中打开？没有安装广告拦截器。

【问题讨论】：

你试过用window.open('filename','_blank');
是的，这就是我现在使用的功能。唯一的事情是我直接从后端而不是本地文件获取数据
是的，NP，你试过这个方法吗？ _blank?
是的，窗口只是在 chrome 中立即打开和关闭
您能提供一个最小的工作示例吗？否则很难发现问题。

标签： javascript angular pdf

【解决方案1】：

根据@barbsan 的想法，我更改了http 标头并收到了一个blob，并使用window.open() 将blob 显示为pdf。它奏效了。

这是我的示例代码。

在服务文件中

downloadPDF(url): any {
    const options = { responseType: ResponseContentType.Blob  };
    return this.http.get(url, options).map(
    (res) => {
        return new Blob([res.blob()], { type: 'application/pdf' });
    });
  }

在组件文件中

this.dataService.downloadPDF(url).subscribe(res => {
  const fileURL = URL.createObjectURL(res);
  window.open(fileURL, '_blank');
});

【讨论】：

如果您使用广告拦截器扩展程序，请小心。默认情况下，广告拦截器会阻止 blob URL。结果，例如在 Chrome 和 Firefox 中，使用 uBlock Origin 扩展程序，它会尝试打开新窗口并自动关闭它。你可以在这里阅读更多信息：stackoverflow.com/questions/51272781/…
另外，如果您也关心在 IE 中的工作，请阅读：stackoverflow.com/questions/24007073/…
用上述方法在新标签页中打开文件时如何设置文件名？
知道如何在打开 PDF 时设置新标签页的名称吗？
任何人都可以提供使用上述方法在新选项卡中创建文件名打开文件

【解决方案2】：

在新选项卡中打开 pdf 文件的一种线性解决方案。您只需要拥有文件 url 并在按钮单击时使用此功能。

window.open(url, '_blank');

【讨论】：

【解决方案3】：

您需要在标签中使用“target="_blank" ;

例如：<a target="_blank" href="https://www.google.com/"> </a>

【讨论】：

嗨 Hoiama，欢迎来到 StackOverflow！不幸的是，您的回答没有解决原始问题，即明确使用window.open()。请务必仔细阅读问题和任何答案，因为很容易错过这样的事情！

【解决方案4】：

您可以在新标签中按行显示pdf文件：

window.open(fileUrl, '_blank');

fileUrl 是一个包含文件路径的变量。

【讨论】：

【解决方案5】：

如何使其在 Angular 10 中工作，只需稍作改动，这在来自@K Harish 答案的服务文件中

import { map } from 'rxjs/operators';


    return this.http.get(url, options).pipe(map(
    (res) => {
        return new Blob([res], { type: 'application/pdf' });
    }));

【讨论】：