Angular 5 如何下载远程图像

Question

在 Angular 5 中，我想从本地主机（服务器）下载图像。我已经有了带有路径的图像名称：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 直接下载图片的帖子，但找不到任何解决方案。所以请不要将其标记为重复。

Answer 1

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

这是一个简单的 downloadUrl 函数，它会要求浏览器下载任何给定的 url：

    function downloadUrl(url: string, fileName: string) {
      const 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);
      const url = URL.createObjectURL(val);
      downloadUrl(url, 'image.png');
      URL.revokeObjectURL(url);
    });