CODEWITHSUNDEEP
javascriptangular
user1902183
user1902183

Reputation: 3377

File download through Angular 2

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!

Upvotes: 11

Views: 23915

Answers (2)

Kiran Shenoy
Kiran Shenoy

Reputation: 201

I had a similar issue when i was trying to download a PDF file which my Node server was sending. I was making a GET request on my server with some id details. This is what worked for me.

Function Calling my service

printBill(receiptID) {
this.BillingService.printBill(receiptID)
    .subscribe(res => {
        saveAs(res,"InvoiceNo"+receiptID+".pdf");
        let fileURL = URL.createObjectURL(res);
        window.open(fileURL);
    })
}

Service

printBill(billID) {
    return this.http.get('/billing/receipt/'+billID, 
                   { responseType: ResponseContentType.Blob })
      .map((res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        })
}

And dont forget to import ResponseContentType

Hope this helps you

Upvotes: 9

Roninio
Roninio

Reputation: 1771

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.

Upvotes: 4

Related Questions