Question

我尝试使用window.open（）打开PDF文件，但是该窗口会自动打开和关闭，并且该文件的下载方式与其他文件一样。如何在新标签页中打开pdf文件？仅供参考，没有安装广告拦截器

Answer 1

感谢您的回复。

从@barbsan的想法出发，我更改了http标头，并接收到一个blob，并使用window.open（）将其显示为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');
});

Answer 2

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

<div class="pageContainer"> <div class="pageContent"> My content here.... <div>page n°X</div> </div> </div> <div class="pageContainer"> <div class="pageContent"> My second page here.... <div>page n°X</div> // I want to render the actual div number here </div> </div>

竖起大拇指：-）

Answer 3

您需要用户标签中的“ target =“ _ blank ”；

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

Answer 4

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

CircleAvatar(
  // the circle avatar has the background image property for specifying images
  backgroundImage: AssetImage('assets/yourimage.png'),
);

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

Answer 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' });
    }));

在新标签的angular 4中打开PDF文件吗？

5 个答案: