Angular2显示PDF

Question

我有一个带有ASP.NetWeb API的angular2项目。我有代码从我的数据库中检索到服务器上文档的文件路径。然后我想在浏览器的新选项卡中显示这个文档。有人有什么建议吗？

我很高兴在Angular2（Typescript）或我的API中检索文件并将其流式传输。

这是我尝试在我的API中检索它，但我不知道如何在Angular2中接收它并正确显示它：

public HttpResponseMessage GetSOP(string partnum, string description)
    {
        var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path;
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(sopPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

任何帮助将不胜感激。

非常感谢！！！

Answer 1

角度5

我也有同样的问题，为此我损失了几天时间。

在这里，我的回答可能会帮助其他人，这有助于渲染pdf。

对我来说，即使我提到响应类型：“数组缓冲区”，它也无法接受它。

为此，您需要提及响应类型：“数组缓冲区”作为“json”。（参考资料）

工作码

service.ts

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

}

component.ts

this.myService.downloadPDF().subscribe(
    (res) => {
    var fileURL = URL.createObjectURL(res);
    window.open(fileURL);
    }
);

从以下链接引用

https://github.com/angular/angular/issues/18586

Answer 2

角v.5.2.1答案：

在 *.服务中

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

然后在< code>*.component.ts中

downloadPDF() {
    let tab = window.open();
    this._getPdfService
      .downloadPDF()
      .subscribe(data => {
        const fileUrl = URL.createObjectURL(data);
        tab.location.href = fileUrl;
      });
  }

在调用服务之前，启动并打开一个新标签是很重要的。然后将这个选项卡url设置为fileurl。

Answer 3

首先，您需要为 http 请求设置选项 - 将响应类型设置为响应内容类型.Blob，使用 blob（） 将响应作为 blob 读取，并将其类型设置为应用程序/pdf：

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

然后，为了获取该文件，您需要< code >订阅该文件，您可以创建新的< code>ObjectURL并使用< code>window.open()在新标签中打开PDF:

this.myService.downloadPDF().subscribe(
        (res) => {
        var fileURL = URL.createObjectURL(res);
        window.open(fileURL);
        }
    );