File download through Angular 2

Question

I have a backend that I set up to return a file through setting the header

Content-Disposition: attachment;filename=somefile.csv

It works directly in the browser and downloads the file immediately upon invoking the URL that points to that resource.

My goal is to have a button in an Angular 2 template. When the user clicks that button, I'd need to collect some data from the client-side (some IDs) and send it to the server to invoke that file download URL.

I'd like the user to stay on the same page and not have any new tabs open up but simply have the file start downloading (just like when the URL is invoked directly).

It will need to be done through a POST request because I can have quite a bit of data to send to identify what resource needs to be downloaded.

What does the call on the Angular 2 side look like for this? I tried a couple of things but I am obviously on the wrong path.

Any help would be appreciated!

Answer 1

i have implemented it like this.

i have a service requesting file download. The response return a url, which is on amazon s3. This is a zip file containing what i want to download.

the below works on all browsers.

in your controller

requestDownload() {

this.downloadservice.downloadImages(obj)
      .subscribe(
        response => this.download(response )
      );

}

// res is an object
download(res){ 
    var link = document.createElement("a");
    link.download = "a";
    link.href = res.link;
    document.body.appendChild(link);
    link.click();

     }

downloadservice file

downloadImages(body): Observable<any>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post("/Camera51Server/getZippedImages", body, options)
            .map((res:Response) => res.json())
            .catch(this.handleError);
    }

if you like i can give you a link to the repository.