html The "download" attribute causing a new tab to open rather than initiating a

Question

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Firefox, Chrome, and Safari.

Here's the code snippet from the template:

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

The download path looks something like this:

I have also tested it with various images sourced from the internet, but unfortunately, none of them work. Oddly enough, if I try using a local image (C:/Users/User/Desktop/images/image.jpg), it works perfectly fine.

Do you have any insight into why this issue is occurring and how to resolve it? If you require additional information, please let me know.

Thank you.

html angular image download

Answer 1

Answer №1

To directly obtain the desired image, you may attempt using the following code:

<a [href]="javascript:downloadImage(downloadLink);"></a>

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

Answer 2

To directly obtain the desired image, you may attempt using the following code:

<a [href]="javascript:downloadImage(downloadLink);"></a>

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

Answer 3

Answer №2

After conducting thorough research, I came to the conclusion that utilizing the backend is the most effective solution for this particular problem. My objective was to create an anchor tag that, upon being clicked, would initiate a download of the S3 URL. However, instead of downloading the file, it would open in a new tab. This issue can likely be attributed to one or two factors. Firstly, browsers typically do not permit direct cross-origin downloads. Secondly, your Response Content Disposition may also play a role. To address this matter, I have devised the following approach to enable direct downloading from S3 to the filesystem:

Backend (I personally employ Django and 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)

Frontend (utilizing Angular):

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

Answer 4

After conducting thorough research, I came to the conclusion that utilizing the backend is the most effective solution for this particular problem. My objective was to create an anchor tag that, upon being clicked, would initiate a download of the S3 URL. However, instead of downloading the file, it would open in a new tab. This issue can likely be attributed to one or two factors. Firstly, browsers typically do not permit direct cross-origin downloads. Secondly, your Response Content Disposition may also play a role. To address this matter, I have devised the following approach to enable direct downloading from S3 to the filesystem:

Backend (I personally employ Django and 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)

Frontend (utilizing Angular):

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

html The "download" attribute causing a new tab to open rather than initiating a

Answer №1

Answer №2

Similar questions

How to dynamically customize styling on md-tab in Angular2-material?

Issue with Angular 4 Bootstrap Carousel

How can I prevent duplicate IDs when submitting a form through AJAX within a while loop?

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

Text Alignment Issue in Icon Bar of Zurb Foundation 5

Section separators within ordered lists

Manipulating div position interactively with vanilla javascript during scroll

Styling Collapse Text in Bootstrap Framework

It is imperative that the 'Access-Control-Allow-Origin' header value in the response is not set to '*' when the request's credentials mode is 'include'

connecting and linking template content with an Observable

Animating Angular ng-template on open/close state status

Is it possible to customize the placement of the login or register success message?

The ngx-translate Angular translation file is being loaded twice unnecessarily

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

What are the implications of using subresource integrity with images and other types of media

What is the best way to display a User's name as text on a Django page without having to refresh the page?

The custom component at the beginning of the MDX file in a Next.js project is not adhering to the

What is the best way to display text outside of the current div container?

Issue with Font Requests in Browsers when Using Angular 10 and SCSS with @font-face

Encountering an error in Angular where the property does not exist in type