在Angular 5 app中渲染PDF

Question

我正在尝试在Angular 5应用程序中呈现PDF。基本上我发送一个GET请求以获取文件流（没有链接！这在我们的方案中不可能通过合规性）。文件流附带Content-Type: application/pdf。

现在我有两个问题：

首先，响应从服务器返回200（这是好的，但它总是报告我的角度应用程序中的错误：

获取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？我虽然这个lib（https://vadimdez.github.io/ng2-pdf-viewer/）。作为src属性，它可以采用URL或Uint8Array（可能类似于字符串？）

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

@UPDATE：

@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文档。