在 Angular 5 应用程序中渲染 PDF

Question

我正在尝试在 Angular 5 应用程序中呈现 PDF。基本上，我发送 GET 请求以获取文件流（没有链接！这在我们的场景中是不可能的）。文件流带有Content-Type: application/pdf.

现在我有两个问题：

首先，响应从服务器返回 200（没关系，但它总是在我的 angular 应用程序中报告错误：

获取 PDF 的方法如下所示：

  fetchPdfAjaxRequest(caseId: string) {
    this.caseListService.getPdfFileStream(caseId)
                        .takeUntil(this.ngUnsubscribe)
                        .subscribe( (res) => {
                          console.log(res);
                        },
                        (error) => {
                          this.errorService.displayError(error.status, error.statusText);
                        });
  }

我的服务方法如下所示：

public getPdfFileStream(caseId: string) {
    const url = this.CASE_API_URL + '/' + caseId + '/pdf';
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');

    return this.httpClient.get(url, {headers: headers});
  }

然而，即使它以 200 响应，它也会进入错误分支。是不是因为我需要在请求中设置一些额外的标头？

响应正文只是一个巨大的字符串：

// just an excerpt from the "response" tab in Chrome dev tools
JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/KQovQ3JlYXRvciAo/v8AdwB

现在我需要解析该字符串并将其呈现为 PDF。

有没有人有线索... - 为什么响应显示来自服务器的 200，但进入 Angular 的错误分支？- 如何将那个巨大的字符串（blob）渲染为 PDF？我想到了这个库（https://vadimdez.github.io/ng2-pdf-viewer/）。作为 src 属性，它可以采用 URL 或 Uint8Array（可能类似于字符串？）

任何帮助是极大的赞赏 ：）

@更新：

@Zlatko 已经回答了第一个问题（不获取文件流）的解决方案。

现在，关于如何渲染 PDF，我找到了另一篇文章，并得出了以下解决方案：

let file = new Blob([pdf], { type: 'application/pdf' });            
var fileURL = URL.createObjectURL(file);
window.open(fileURL);

Answer 1

HttpClient 的默认 responseType 是“json”。告诉 angular 期待一个二进制文件：

return this.httpClient.get(url, { headers: headers, responseType: 'blob' });

查看HttpClient文档。