Question

在我的angular 4应用程序中，我有一个带有一些缩略图的图库，每个缩略图都有一个下载按钮。

我想在点击此按钮时开始下载图像，是否可以角度？

现在，当我点击按钮时，我有：

component.ts

  downloadImage(downloadLink) {

    this.mediaService.getImage(downloadLink).subscribe(
      (res) => {
        const fileURL = URL.createObjectURL(res);
        window.open(fileURL);
      }
    );
  }

在服务中：

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

但显然window.open(fileURL)会打开一个带有图片的新窗口。

Answer 1

要直接下载您可以尝试使用的图片：

downloadImage(downloadLink) {

this.mediaService.getImage(downloadLink).subscribe(
  (res) => {
    const fileURL = URL.createObjectURL(res);
    window.location.href = fileUrl;
  }
);
}

Answer 2

最后我使用这个方法：

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

Angular 4直接下载图像

2 个答案: