angular - 在 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，它也会进入错误分支。可能是因为我需要在请求中设置一些额外的 header ？

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

// 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 的默认响应类型是“json”。告诉 Angular 期待一个二进制文件:

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

看看HttpClient文档。