Question

我有一个服务器，我从服务器发送请求（ID）我得到一个json，在json里面我有字段ImagePath和url to image。我该如何下载这张照片？

HTML

<button md-raised-button (click)="DownloadImage(application.ApplicationId)">Download Image</button>

组件

 DownloadImage(applicationId:number)
    {
        var ID=applicationId;
        this.httpService.downloadImage(ID).subscribe((response)=>{
            console.log(response);
        })


    }

服务

downloadImage(applicationId:number)
{
         return this.http.get('http://192.168.0.138/api/GetPhoto?applicationId='+applicationId,{headers:this.headers})
                         .map((res:Response)=> res.json() as DownloadImage
                        );

}

JSON

Object {ImagePath: "http://192.168.0.138:80/Content/photos/29ef5a62-8a84-41cf-92d7-7b76da20357b.jpg"}

Answer 1

尝试使用带有下载属性的常规html锚标记：）

注意：替换＆＃34; response.ImagePath＆＃34;根据您在控制器中命名变量的内容。

<a [href]="response.ImagePath" download="download.jpg"><i class="fa fa-download"></i> Download</a>

希望这有帮助。

Answer 2

要链接请求，您可以将Observable转换为Promise，然后在其上调用.then()，这将获得前一次调用的映射结果作为参数。我不打算在angular2中添加用于下载文件的代码，因为它已在十几篇文章中反复回答。

服务

downloadImage(applicationId:number) {
    const _self = this;
    return this.http.get(`http://192.168.0.138/api/GetPhoto?applicationId=${applicationId}`, {headers:this.headers})
       .map((res:Response) => res.json() as DownloadImage)
       .toPromise()
       .then(function(dlImage: DownloadImage) {
          // Launch second call to dlImage.ImagePath
          const options = new RequestOptions({headers: myHeaderObj});
          return _self.http.get(dlImage.ImagePath, options);
        });
  }

组件

DownloadImage(applicationId:number) {
    this.httpService.downloadImage(applicationId).subscribe(resp => {
          // ... See numerous other SO topics for examples
    });
}

只需确保图片是从同一个域提供的，否则您将遇到CORS问题（但这也已在十几个SO帖子中得到解决）。

从URL下载到计算机

2 个答案: