html下载属性打开新标签而不是下载文件

Question

我有一个 Angular 4 网站，它允许用户从 Amazon S3 存储桶下载图像，为此我使用具有下载属性的 anchor ，但它没有下载图像，而是在新选项卡中打开。 我用 Firefox、Chrome 和 Safari 对其进行了测试。

这是我在模板中的内容:

<a mat-raised-button color="accent" [href]="downloadPath" download matTooltip="Download file to pc." *ngIf="isFinalReport()">
    <mat-icon>file_download</mat-icon>
    DOWNLOAD
</a>

下载路径是这样的:https://s3-sa-east-1.amazonaws.com/bucket-name/environment/imageName.jpg

我还用网络上的几张图片对其进行了测试，但无法使用任何图片，但如果我使用本 map 片 (C:/Users/User/Desktop/images/image.jpg)，它会完美运行。

知道为什么这不起作用以及如何解决它吗？ 如果您需要更多信息，请告诉我。

谢谢。

Answer 1

To directly download the image , you can try with 
<a [href]="javascript:downloadImage(downloadLink);"></a>

downloadImage(downloadLink) {
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();
          });
        }
      }