Question

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

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中遇到问题。

在Angular 4中下载图像

1 个答案: