Download file with Angular and Filesaver.js not working

Question

i use Filesaver.js to try to download files from my backend, which is on Express (nodejs).

Here is my backend code to download files. It uses a middleware to check the auth info.

res.download(url, function (err) {
   if (err) {
      console.log("Error: " + err);
      res.status.send({
         message: "Can not download file"
      });
   }
});

And here is the code of my service:

downloadEventAttachment(attachmentUrl){

    let endPointUrl = this.auth.getServerHost();

    this.authHttp.get(endPointUrl + attachmentUrl)
        .subscribe(res => {
            var blob = new Blob([res], { type: res.headers.get('Content-Type') });
            saveAs(blob);
        }) 
}

The problem is that generates a download file but with errors. If i download a image it says that the image is not valid.

If i try to download a txt file its have this content:

Response with status: 200 OK for URL: http://192.168.1.78:8081/calendar/download_eventattachment/728/file-1496421767591.txt

If i use this request from postman, then the image is well displayed.

I'm doing something wrong?

Thanks a lot

[UPDATE 1]

I add the responseType and still not working:

downloadEventAttachment(attachmentUrl){
        let endPointUrl = this.auth.getServerHost();

        let options = new RequestOptions({ responseType: ResponseContentType.Blob });

        this.authHttp.get(endPointUrl + attachmentUrl, options)
            .subscribe(res => {

                var blob = new Blob([res], { type: res.headers.get('Content-Type') });
                saveAs(blob);
            },
            error => {
                console.log(error);
            })
    }

https://stackoverflow.com/questions/33242959/saving-png-files-with-filesaver-js — Ahmed Musallam, Jun 02 '17 at 20:22
You have to Set the Response Content Type ... See here http://talk-about-code.blogspot.de/2017/05/download-file-with-angular2-and.html?m=1 — Ludwig, Jun 02 '17 at 21:17
@Ludwig thanks for your answer but this don't work. See my update. — Ali Briceño, Jun 03 '17 at 00:42

score 1 · Accepted Answer · answered Jun 03 '17 at 01:41

Finally works on this way:

downloadEventAttachment(attachmentUrl){
    let endPointUrl = this.auth.getServerHost();
    let options = new RequestOptions({ responseType: ResponseContentType.Blob });
    this.authHttp.get(endPointUrl + attachmentUrl, options)
        .subscribe(res => {
                var file = res.blob();
            });
            saveAs(file);
        },
        error => {
            console.log(error);
        })
}

I think that the older line: var blob = new Blob([res], { type: res.headers.get('Content-Type') });

Was overlapping the content of the response.

Download file with Angular and Filesaver.js not working

1 Answers1