HTML下载属性在新标签页中打开而不是下载文件。

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），它可以完美运行。你有什么想法为什么它不能正常工作，以及如何解决？如果需要更多信息，请告诉我。谢谢。

- Damian Scheck

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

- Shruthi

Answer 2

经过一些研究，我发现使用后端是解决这个问题的最佳方法。我正在创建一个锚标签，点击后应该下载s3 url，但实际上它会打开一个新标签页来显示对象。问题很可能由一两个原因引起。一个是浏览器不允许直接跨域下载。第二个与您的响应内容设置有关。以下是我获取s3直接下载到文件系统的方法：

后端（我使用Django和boto3）：

    def get_file(self, obj):      
        client = boto3.client('s3', aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
                              aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY)

        return client.generate_presigned_url(
            'get_object',
            Params={
                'Bucket': settings.AWS_STORAGE_BUCKET_NAME,
                'Key': obj.key,
                'ResponseContentDisposition': 'attachment',
            },
            ExpiresIn=600)

前端（使用Angular）：

<a [href]="what_i_returned_from_backend" [download]="answer.png" target="_self" rel="noopener noreferrer">Download</a>

- Skyler Rubin