Download attribute not working in safari

Question

I am using a download attribute in my link:

   <a style="color:white" download="myimage" href="images/myimage.jpg">Download image</a>

It is working very well in almost all browsers. This means, if I click on the link the image is automatically downloaded. I tested it in safari 10.1.2 on my mac and it is working fine.

But on my friends mac who is working with safari 10.0.3 it is not working. He is saying that the image is only opening in a new window but not downloading.

Why is this happening and what can I do to make it work anywhere?

Answer 1

According to https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html, it was added in Safari 10.1:

HTML5 Download Attribute The download attribute for anchor elements indicates that the link target is a download link that downloads a file, instead of a navigational link. When you click a a link with the download attribute, the target is downloaded as a file. Optionally, the value of the download attribute provides the suggested name of the file.

It doesn't seem to be available in iOS Safari 11.1 though from my own testing, which has me a bit confused. I'd expect them to be equal in standards support, based on their similar version numbering.

Answer 2

try this code:

var element = document.createElement('a');
            var clearUrl = base64.replace(/^data:image\/\w+;base64,/, '');

            // element.setAttribute('href', 'data:attachment/image' + base64);
            element.setAttribute('href', 'data:application/octet-stream;base64,' + encodeURIComponent(clearUrl));
            element.setAttribute('download', 'filename.jpg');
            document.body.appendChild(element);
            element.click();
            document.body.removeChild(element)

This is work for me in safari version 10.0.3