当以角度 4 按下按钮时如何从 url 下载图像

Question

大家好，我得到一个来自服务器端的图像并在网站上显示它我想在按下下载按钮时下载它我该如何实现？

我的html如下

 <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>

角度打字稿

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

个人资料图片的网址将是“http://192.0.0.100/image.jpg”

当我单击下载按钮时如何实现这一点。帮助将不胜感激。

Answer 1

使用window.open(url);下载图片

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

Answer 2

您只需将“下载”属性添加到您的锚标记。然后根据需要应用 css 样式。

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