Angular 2 - 使用 PDF 查看器显示从 Web 服务 API 获得的 PDF答案

【问题标题】：Angular 2 - using a PDF Viewer to display PDF obtained from a web service APIAngular 2 - 使用 PDF 查看器显示从 Web 服务 API 获得的 PDF
【发布时间】：2017-09-29 04:32:21
【问题描述】：

我是 Angular 2 的新手，我已经有一段时间没有做过 Web 开发了，所以我生疏了。我能够相当快地启动并运行我的小型 angular 2 应用程序。但是，我一直坚持使用什么 pdf 查看器来显示通过 Web API 在我的 Web 浏览器 (SPA) 中（而不是在新的浏览器窗口中）中检索到的 PDF。通过执行以下操作，我成功地将来自 web api 的响应转换为 blob 并在新的浏览器/选项卡窗口中显示它：

my.ts 文件：

 onGetFullPdf() {
    this.pasSignerService.getPasFormFullPdf()
      .subscribe(
        (pdfBlob: Blob) => {
          var fileURL = URL.createObjectURL(pdfBlob);
          // this works but opens it in a new window
          window.open(fileURL);
}

谁能告诉我如何在我的浏览器选项卡（不是新选项卡）上显示 PDF（来自 web api）？我想要所有漂亮的 PDF 控件。我找到了 pdf.js_viewer，但那是针对 angularJS（不是 angular 2/4/x）。我看到了一个叫做 ng2-pdf-viewer 的工具，但它似乎并不全功能。我觉得我缺少一些基本的东西。

我需要安装 pdf 查看器还是有其他方法可以实现我的目标？
浏览器不是自带 PDF 查看器吗？
我可以利用它们吗？
为什么我需要下载一个？

【问题讨论】：

我使用的是 ng2-pdf-viewer，你说得对，基本组件只显示 PDF，没有控件。但该项目有一个带有所有控件的全功能查看器示例。

标签： angular pdf

【解决方案1】：

您可以将响应标头上的内容类型设置为“application/pdf” 大多数新浏览器都有很好的控制器集和完整的功能来支持和用作 pdf 阅读器。你只需要告诉浏览器：“嘿，我给你发了一个 pdf！”，剩下的事情浏览器会处理。

在 asp.net 上=>

context.response.ContentType="application/pdf";

关于 js=>

res.setHeader('content-type', 'application/pdf');

用于 pdf 文件的 chrome 和边缘控制器

【讨论】：