Angular 2 save file from Nodejs - node.js

Question

I have the snipped in NodeJS to try to do a download from my server.
router.post("/download", function(req, res, next) {
console.log(req);
filepath = path.join(__dirname, "/files") + "/" + req.body.filename;
console.log(filepath);
res.sendFile(filepath);
});
This is my Angular 2 code:
Component.ts
download(index) {
var filename = this.attachmentList[index].uploadname;
this._uploadService
.downloadFile(filename)
.subscribe(data => saveAs(data, filename), error => console.log(error));
}
Service.ts
export class UploadService {
constructor(private http: HttpClient, private loginService: LoginService) {}
httpOptions = {
headers: new HttpHeaders({
"Content-Type": "application/json",
responseType: "blob"
})
};
downloadFile(file: string): Observable<Blob> {
var body = { filename: file };
console.log(body);
return this.http.post<Blob>(
"http://localhost:8080/download",
body,
this.httpOptions
);
}
In my HTML response I get the file correctly recording to my browser's network inspection tool. However Angular is trying to parse the response into a JSON object which obviously doesn't work since the response is a blob.
The error I get is this:
Unexpected token % in JSON at position 0 at JSON.parse ()
at XMLHttpRequest.onLoad angular 2
Does anyone have a solution for this?
Thanks in advance!

Answer 1

Try the following http options:
{
responseType: 'blob',
observe:'response'
}
You will then get a response of type HttpResponse<Blob>, so doing data.body in your service will give you the blob that you can pass to saveAs.
You can find more info on observe here:
https://angular.io/guide/http#reading-the-full-response

Answer 2

I solved that, in service code I deleted the after the post because it forced my return get a binary file, and not a JSON. Now the code it's like that:
downloadFile(file: string): Observable<Blob> {
var body = { filename: file };
console.log(body);
return this.http.post<Blob>(
"http://localhost:8080/download",
body,
this.httpOptions
);
}
Thank you all.