Question

我有一个Angular 4网站，允许用户从Amazon S3存储桶下载图像，为此我使用带有下载属性的锚点，但是不是下载图像，而是在新选项卡中打开它。我用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

我还使用网络上的几张图片对它进行了测试，并且无法使用任何图像，但如果我使用本地图像（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();
          });
        }
      }

html下载属性打开新选项卡而不是下载文件

1 个答案: