Angular 4 direct download images

Question

In my angular 4 application I have a gallery with some thumbnails, every thumbnails have a download button.

I want to start the download of the image when this button is clicked, is it possible in angular?

Now when I click in the button I have:

component.ts

  downloadImage(downloadLink) {

    this.mediaService.getImage(downloadLink).subscribe(
      (res) => {
        const fileURL = URL.createObjectURL(res);
        window.open(fileURL);
      }
    );
  }

And in the service:

  getImage(imageUrl: string) {
    return this.http.get(imageUrl, {observe: 'response', responseType: 'blob'})
      .map((res) => {
        return new Blob([res.body], {type: res.headers.get('Content-Type')});
      })
  }

But obviously window.open(fileURL) opens a new window with the image.

I would recommend to use filesaver.js for that. I have described the procedure here: https://stackoverflow.com/questions/44871600/download-file-sent-in-response-angular2/44879029#44879029 — Ludwig, Nov 22 '17 at 09:57

score 1 · Answer 1 · answered Nov 22 '17 at 09:57

1

To direcly download the image you can try with :

downloadImage(downloadLink) {

this.mediaService.getImage(downloadLink).subscribe(
  (res) => {
    const fileURL = URL.createObjectURL(res);
    window.location.href = fileUrl;
  }
);
}

answered Nov 22 '17 at 09:57

Boulboulouboule

4,087
1
13
29

It opens the image in the current tab, but I want to direct open the SaveAs dialog – Alessandro Celeghin Nov 22 '17 at 10:03
i got error:Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided – Kapil Soni Sep 24 '20 at 08:53

score 1 · Accepted Answer · answered Feb 08 '18 at 14:52

1

Finally I use this method:

this.mediaService.getImage(downloadLink).subscribe(
  (res) => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(res);
        a.download = title;
        document.body.appendChild(a);
        a.click();
  });
}

answered Feb 08 '18 at 14:52

Alessandro Celeghin

4,039
14
49
95

if i pass directly image url on that i got error:Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided – Kapil Soni Sep 24 '20 at 08:52

Angular 4 direct download images

2 Answers2

Linked