Download image not working for aws based url

问题

I used to have download image simply by adding a download attribute in an anchor element with image path on href attribute.

<a href="https://s3.amazonaws.com/..../Producer.png" download>Download</a>

Now with chrome latest update with cors(cross origin resource sharing) the images get opened in new tab.

I did various research on Google including stackoverflow itself. But none of them is helping me. Is this not possilbe to download image from s3 bucket ?

Also I have enables the cors from aws.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Now I am using this function to accept url and filename

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

and used this function inside the onclick event.

<div class="download-icon" onclick="forceDownload('https://s3.amazonaws.com/.../images.jpg','images.jpg')"> Download</div>

Also tried using Filesaver.js

function forceDownload(url, fileName){

    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'blob'
    xhr.onload = function() {
     saveAs(xhr.response, fileName);
    }
    xhr.send()
}

Note: with all these function implemention I get the partial result. only 2 or 3 images get downloaded and after that it start showing the cors related issue.

回答1:

Try this:

    let forceDownload = url => {
      let urlArray = url.split("/")
      let bucket = urlArray[3]
      let key = `${urlArray[4]}/${urlArray[5]}`
      let s3 = new AWS.S3({ params: { Bucket: bucket }})
      let params = {Bucket: bucket, Key: key}
      s3.getObject(params, (err, data) => {
        let blob=new Blob([data.Body], {type: data.ContentType});
        let link=document.createElement('a');
        link.href=window.URL.createObjectURL(blob);
        link.download=url;
        link.click();
      })
    }

The url parameter refers to the full url of the image.

You will also need the aws-sdk.

回答2:

In your S3 Bucket find the file you wish to work with and click it.
Click on the "Properties" tab
Click on the box that says "Metadata"
Click on the circle to the left of the Content-Type and then click "Add Metadata"
Set the "Key" to "Content-Disposition" and set the value to "attachment" and hit save.
This will force it to be downloaded instead of played or displayed in your browser.

For whichever backend method you are using to upload to s3 ensure ContentDisposition='attachment', You also need to verify your href is not named with http: it needs to be https:

来源：https://stackoverflow.com/questions/49947961/download-image-not-working-for-aws-based-url

标签

javascript

download

filesaver.js