How to download Image from a url when a button is pressed in angular 4

Question

Hi all I get an image that comes from the server side and shows it in the website I want to download it when download button is pressed How do I achieve this?

I have the html as follows

 <div class="row SectionRow" style="margin: 50px 0px !important;">
              <div class="col-md-6 col-sm-6 col-xs-6" style="text-align: center; margin-bottom: 20px">
                <img #imgRef2 class="ProfileImage">
                <br>
                <button type="button" (click)="DownloadProfilePic()" class="btn btn-default SigButton">Download</button>
              </div>

              <div class="col-md-6 col-sm-6 col-xs-6" style="text-align: center; margin-bottom: 20px; padding-top: 50px;">
                <img #imgRef class="SignatureImage">
                <br>
                <button type="button" class="btn btn-default SigButton">Download</button>
              </div>
            </div>

angular typescript

@ViewChild('imgRef') Signature: ElementRef;
  @ViewChild('imgRef2') ProfilePic: ElementRef;

OnInit()
{
          this.Signature.nativeElement.src = this.ImageAppDetails.AA_SIGNATURE;
          this.ProfilePic.nativeElement.src = this.ImageAppDetails.AA_PHOTO;
}

The url will be for profile pic as 'http://192.0.0.100/image.jpg'

how do I acheive this when I click the download button. Help would be appreciated.

you could solve this problemi using https://www.npmjs.com/package/file-saver — Jacopo Sciampi, Dec 07 '18 at 11:18

score 1 · Accepted Answer · answered Dec 07 '18 at 11:16

1

Use window.open(url); to download the image

 DownloadProfilePic() { ;
    var url = this.ProfilePic.nativeElement.src 
    window.open(url);
  }

answered Dec 07 '18 at 11:16

Sachila Ranawaka

39,756
7
56
80

How to do I do it without opening a new window just download it to a local computer location? – Ashane Alvis Dec 07 '18 at 11:17
check this https://stackoverflow.com/questions/47431331/angular-4-direct-download-images?answertab=active#tab-top – Sachila Ranawaka Dec 07 '18 at 11:19

score -2 · Answer 2 · answered Dec 07 '18 at 11:44

-2

You just have to add 'download' attribute to your anchor tag. And then apply css style as required.

<a class="fa fa-download" type="button" class="btn btn-default SigButton">Download</a>

answered Dec 07 '18 at 11:44

siddharth shah

1,139
1
9
17

class attribute is set two times. No download attribute in your example – Vali Munteanu May 21 '20 at 14:07

How to download Image from a url when a button is pressed in angular 4

2 Answers2