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

You have to Set the Response Content Type ... See here talk-about-code.blogspot.de/2017/05/… — Ludwig
– Ludwig, Commented Jun 2, 2017 at 21:17
@Ludwig thanks for your answer but this don't work. See my update. — Ali Briceño
– Ali Briceño, Commented Jun 3, 2017 at 0:42

Ali Briceño · Accepted Answer · 2017-06-03 01:41:57Z

1

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.

answered Jun 3, 2017 at 1:41

Ali Briceño

1,1342 gold badges19 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Download file with Angular and Filesaver.js not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related