Render PDF in Angular 5 app

Question

I'm trying to render a PDF in an Angular 5 app. Basically I'm sending a GET-request in order to get the file stream (no link! That's not possible in our scenario by compliance). The file stream comes with Content-Type: application/pdf.

Now I have 2 problems:

First of all the response comes back from the server with 200 (which is OK, but it always reports an error in my angular app:

The method for fetching the PDF looks like this:

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

My service method looks like this:

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});
  }

However, even though it responds with a 200, it goes in the error branch. Is it maybe because I need to set some additional headers in the request?

The response body is just a huge string:

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

Now I need to parse that string and render it as a PDF.

Does anyone have a clue... - why the response shows a 200 from the server, but goes in the error branch in Angular? - how I can render that huge string (blob) to a PDF? I though of this lib ( https://vadimdez.github.io/ng2-pdf-viewer/). As an src attribute it can take a URL, or a Uint8Array (which might be something like the string?)

Any help is greatly appreciated :)

@UPDATE:

The solution for the first problem (not getting the file stream) has been answered by @Zlatko.

Now, for how to render the PDF I found another post and came to the following solution:

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

Possible duplicate of [Angular HttpClient "Http failure during parsing"](https://stackoverflow.com/questions/46408537/angular-httpclient-http-failure-during-parsing) — Kirk Larkin, Jul 03 '19 at 11:29

score 6 · Accepted Answer · answered Jan 03 '18 at 11:50

6

The default responseType for HttpClient is 'json'. Tell angular to expect a binary:

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

Take a look at HttpClient docs.

answered Jan 03 '18 at 11:50

Zlatko

18,936
14
70
123

I did that already but it had no effect. But I recognized that I originally wanted to set it as a header, which was not correct. Your solution works, thanks :)) Now do you have any idea how to render the PDF? Would that lib work? – dave0688 Jan 03 '18 at 11:54
Now I figured out a solution to directly render the blob, I posted the solution in my opening post in order to help others. Thanks for your help :) – dave0688 Jan 03 '18 at 12:18
Glad that it worked out. You could also open that PDF as a blob, or to be more fancy, with pdf.js – Zlatko Jan 03 '18 at 12:36

Render PDF in Angular 5 app

1 Answers1