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是＆＃39; json＆＃39;。告诉angular想要二进制文件：

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

查看HttpClient文档。

在Angular 5 app中渲染PDF

1 个答案: