Angular 4直接下载图像 [英] Angular 4 direct download images

问题描述

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

In my angular 4 application I have a gallery with some thumbnails, every thumbnails have a download button.

单击此按钮后，我想开始下载图像，可以成角度吗?

I want to start the download of the image when this button is clicked, is it possible in angular?

现在，当我单击按钮时，我有:

Now when I click in the button I have:

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)用图像打开一个新窗口.

But obviously window.open(fileURL) opens a new window with the image.

推荐答案

最后我使用此方法:

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直接下载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！