代码之家 › 专栏 › 技术社区 › Niladri Banerjee - Uttarpara

角度5如何下载远程图像

angular5 angular

1

Niladri Banerjee - Uttarpara · 技术社区 · 8 年前

在Angular5中,我想从本地主机(服务器)下载一个图像。我已经有了路径为的图像名称: http://localhost/projectName/uploads/3/1535352341_download.png 现在我想通过点击一个按钮来下载。

在Angular的HTML视图中,我编写了以下代码:

<button (click)="downloadImage(car.carItem.carTitle)" type="button" class="btn btn-sm btn-info btn-action" tooltip="Download Image" placement="left" container="body"><i class="fa fa-download" aria-hidden="true"></i></button>

在.ts文件中,我执行以下操作,但它会在同一选项卡中打开图像:

downloadImage(imagePath){
  window.location = imagePath;
}

我已经通过了这个职位 Angular 4 direct download images 但找不到任何解决办法。所以请不要把它标记为副本。

3 回复 | 直到 8 年前

1

2

Anoop Babu 8 年前

<a href=" http://localhost/projectName/uploads/3/1535352341_download.png" class="btn clss"
                  target="_self" download>Download</a>

2

1

Ploppy 8 年前

由于您的映像位于远程服务器上,出于安全原因,您不能像使用自己的资源那样简单地下载它。

简单的downloadUrl函数就是这样,它会要求浏览器下载任何给定的url:

function downloadUrl(url: string, fileName: string) {
  let a: any = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.style = 'display: none';
  a.click();
  a.remove();
};

因为我们无法下载远程资源,所以我们必须在客户端构建它。我们将获取资源并创建它自己的url。然后我们终于可以使用 downloadUrl 功能。

constructor(
  private http: HttpClient,
) { }

this.http.get(urlImage, { responseType: 'blob' }).subscribe(val => {
  console.log(val);
  let url = URL.createObjectURL(val);
  downloadUrl(url, 'image.png');
  URL.revokeObjectURL(url);
});

3

0

Kadeem Rolando 8 年前

  constructor(private rs: RequestService,
          private http: Http,
          private sanitizer: DomSanitizer) {

}

 getImage(imageUrl: string) {
return this.http.get(imageUrl, {responseType: ResponseContentType.Blob})
  .map((res) => {
    return new Blob([res.blob()], {type: res.headers.get('Content-Type')});
  });

}

  downloadImage(downloadLink) {
this.orderService.getImage(downloadLink).subscribe(
  (res) => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(res);
    a.download = 'comprobante';
    document.body.appendChild(a);
    a.click();
  });

}

4

0

Ianc22 6 年前

谢谢@Ploppy引导我朝正确的方向前进,

这是我的解决方案,使用fetch(TypeScript)并绕过cors

const getExternalImageFromURL = (requesturl: string): Promise<Blob> => {
    const proxyurl = "https://cors-anywhere.herokuapp.com/";

    return fetch(proxyurl + requesturl).then((res) => {
        return res.blob();
    });
};