Downloading PDF File in Angular Leaves it Blank

Question

I am trying to download a PDF from an API, but am running into a little issue. The data seems to come back fine; here's an example of it coming back:

In the Angular app, I'm using the ngx-filesaver package to save the files. It's working with a different PDF, over which I have a little more control than in this case, and with CSVs. So I know that the package works in the right situations. Here's the download file function I'm using:

getGroup1094BTaxForm(year: string = '2017') {
    return this._http.get(`${this.groupBaseUrl}/taxes/1094/${year}`, { responseType: 'text' }).pipe(
        map((res: any) => {
            const blob = new Blob([res], { type: 'application/pdf' });
            this._fileSaver.save(<any>blob, 'group-1094b.pdf');
            return res;
        })
    );
}

I have tried setting the responseType to blob and text on the GET request, and then when I create the blob after the response comes back I explicitly set it to application/pdf. This same issue occurs when I take out the line that creates the blob and just pass the response right into the _fileSaver.save function.

What am I missing for how to save the file without it being blank? I checked out this answer, but none of the solutions worked for me.

score 0 · Answer 1 · answered Oct 17 '18 at 18:23

0

Change your responseType from text to blob

getGroup1094BTaxForm(year: string = '2017') {
    return this._http.get(`${this.groupBaseUrl}/taxes/1094/${year}`, { responseType: 'blob' }).pipe(
        map((res: any) => {
            const blob = new Blob([res], { type: 'application/pdf' });
            this._fileSaver.save(<any>blob, 'group-1094b.pdf');
            return res;
        })
    );
}

answered Oct 17 '18 at 18:23

Sunil Singh

11,001
2
27
48

Sorry, I forgot to be more explicit. I have tried this with the `responseType` set to `blob` and `text`, both with the same outcome. – pjlamb12 Oct 17 '18 at 18:54
Did you try with response type `arraybuffer` – Sunil Singh Oct 17 '18 at 18:59
Just did; same result as all the others. – pjlamb12 Oct 17 '18 at 19:00
change `Blob([res]` to `Blob([res._body]` – Sunil Singh Oct 17 '18 at 19:02
That produces an error when opening the file, "Failed to load PDF Document". – pjlamb12 Oct 17 '18 at 19:21
finally try with `Blob([res.body]`. Else I will be share my code which uses `FileSaver` – Sunil Singh Oct 17 '18 at 19:39
The response is the string shown in the picture above; there are no attributes on the response. – pjlamb12 Oct 17 '18 at 19:57
It just returns the response to the component that called this function. I returned that, but I could also return an object,: `{ success: true }` or something like that. – pjlamb12 Oct 17 '18 at 20:13
ok, walk through this https://www.npmjs.com/package/angular-file-saver – Sunil Singh Oct 17 '18 at 20:14
That's for AngularJS (v1.x), right? I need it for Angular (v2.0+) which is why I've been using https://www.npmjs.com/package/ngx-filesaver – pjlamb12 Oct 17 '18 at 20:25
Right, you look at that closely. its useing `_body` – Sunil Singh Oct 17 '18 at 20:27
`this._FileSaverService.save((res)._body, fileName);` – Sunil Singh Oct 17 '18 at 20:28
Same "Failed to load PDF Document" error as before when trying to access `.body` or `._body`. – pjlamb12 Oct 17 '18 at 20:31
Now I am doubting on our API response. Just save the API response a file with extension pdf ex test.pdf and check if it is rendering. – Sunil Singh Oct 17 '18 at 20:39
I used the FileSaver.saveAs function from https://www.npmjs.com/package/file-saver, saving the response directly: `const file = new File([res], 'res-group-1094b.pdf', { type: 'application/pdf' });`, `saveAs(file)`, and still got the blank page. Using the blob just produced the "Failed to load" error. – pjlamb12 Oct 17 '18 at 20:49

Downloading PDF File in Angular Leaves it Blank

1 Answers1