代码之家 › 专栏 › 技术社区 › Ashane Alvis

如何从url下载图像时,按下按钮在4

typescript image angular

Ashane Alvis · 技术社区 · 6 年前

大家好,我从服务器端得到一张图片,并在网站上显示。当按下下载按钮时,我想下载它。我如何实现这一点?

我有如下的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;
}

该url将用于配置文件pic' http://192.0.0.100/image.jpg

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

2 回复 | 直到 6 年前

Sachila Ranawaka 6 年前

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

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

-2

siddharth shah 6 年前

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

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前