如何在角度4中按下按钮时从URL下载图像

时间:2018-12-07 11:13:59

标签: angular image typescript

大家好,我得到一个来自服务器端的图像,并在按下下载按钮时在要下载的网站上显示该图像。如何实现此目的?

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

当我单击下载按钮时,如何实现此目的。帮助将不胜感激。

2 个答案:

答案 0 :(得分:1)

使用mc_gross下载图片

window.open(url);

答案 1 :(得分:0)

您只需要在锚标记中添加“下载”属性即可。然后根据需要应用CSS样式。

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