在 Angular 4 中下载图像

Question

我正在尝试以角度 4 从 UI 下载图像。到目前为止，我已应用以下代码下载图像：

DownloadImageFromUrl(imageUrl) {
imageUrl = this.ImagePath + imageUrl;
this.Service.GetImage(imageUrl, { responseType: ResponseContentType.Blob })

  .map(res => {
    return new Blob([res._body], {
      type: res.headers.get("Content-Type")
    });
  })
  .map(blob => {
    var urlCreator = window.URL;
    return 
    this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
  })
 } 

在“GetImage”函数之后：

GetImage(url: string, options?: RequestOptionsArgs): Observable<any> {
    return this._http.get(url, this.addWithImage(options)).map((res) => res.json());
}

private addWithImage(options?: RequestOptionsArgs): RequestOptionsArgs {
    // ensure request options and headers are not null
    options = options || new RequestOptions();
    options.headers = options.headers || new Headers();

    // add authorization header with token
    const token = 'XXXXXXXX';
    if (token) {
        options.headers.append('Authorization', 'Bearer ' + token);
        options.headers.append('Content-Type', 'image/jpg');
    }
    return options;
}

请告诉我这段代码有什么问题？

Answer 1

我不确定它是否会起作用，我现在无法测试它，但试一试：

DownloadImageFromUrl(imageUrl) {
 imageUrl = this.ImagePath + imageUrl;
 var link = document.createElement("a");
 link.setAttribute("href", imageUrl);
 link.setAttribute("download", 'coolNameForTheFile.jpg');
 link.innerText = "click";
 link.click();
}

首先在 Chrome 中试用。我在 Firefox 中遇到了问题。