无法在 Angular 应用程序中显示 PDF 文件

Question

我有一个 PDF 文件存储在应用程序 (assets/pdf/fileName.pdf) 的目录中。我需要在对话框中单击按钮时将其显示在新选项卡上。

在查看了各种答案后，这是我所拥有的：

在 *.component.ts 中：

  openPDF() {
    this.myService.fetchPDF().subscribe(
      res => {
        let file = new window.Blob([res], {type: 'application/pdf'});
        let fileURL = window.URL.createObjectURL(file);
        window.open(fileURL, '_blank');
      }
    );
  }

在 *.service.ts 中：

  fetchPDF(): any {
    const path = 'assets/pdf/fileName.pdf';
    return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
  }

我已经尝试过使用responseType : 'arraybuffer'，但也没有成功。

这是我看过的主题：

• How to Display blob (.pdf) in an AngularJS app
• Angular 2 download PDF from API and Display it in View
• PDF Blob - Pop up window not showing content
• Failed to load PDF document - Angular JS - BLOB

Answer 1

我不确定你为什么使用httpClient。您想要的结果可以通过以下代码简单实现

在 *.service.ts 中：

fetchPDF(): any {
  const path = 'assets/pdf/fileName.pdf'
  return path;
}

在 *.component.ts 中：

openPDF() {
  window.open(this.myService.fetchPDF(), '_blank');
}

Answer 2

您将需要使用 html 嵌入标签（很可能也使用安全管道）、PDF 查看器（如 Google PDF Viewer），或者您可以在新选项卡中打开 PDF（这是我更常用的方法看）。这取决于您的喜好。