Angular 5- PDF文档，下载并在新窗口中显示

Question

我正在使用 Angular 作为前端，并且正在从 REST 完整 Web 服务获取数据。1) 我需要在网络浏览器的新窗口中显示 pdf 文件，我正在从网络服务获取基于 64 的数据。

问题:我能够下载该文件，但当我尝试在新窗口中打开该文件时，它会显示(错误:无法加载 pdf 内容)。这是我的代码:

服务:

this.http.get('https://localhost:44364/api/v1/source/GetImage/parameter1/animal.pdf', { responseType:'arraybuffer' })
    .subscribe(response => {
    var file = new Blob([response], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);

    this.content=this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);
});

HTML:在 HTML 中我使用 IFRAME 来显示 pdf 数据

iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="content"

有谁可以帮帮我吗？谢谢

Answer 1

要下载 pdf 文件，您可以尝试下面的代码。您无法在桌面上打开 pdf 文件。

  this.httpClient.get('../assets/sample.pdf', { responseType: 'arraybuffer' 
    }).subscribe(response => {
      console.log(response);

      const file = new Blob([response], {type: 'application/pdf'});
      const fileURL = window.URL.createObjectURL(file);
      /*const link = document.createElement('a');
      link.href = fileURL;
      link.download = 'sample.pdf';
      link.click();*/
      if (window.navigator.msSaveOrOpenBlob) {
           window.navigator.msSaveOrOpenBlob(file, fileURL.split(':')[1] + '.pdf');
      } else {
           window.open(fileURL);
      }
   });

}