How to make Safari and IE download image instead of opening in a new page?

Question

In Firefox and Chrome this link property \"download=img.jpg\" works fine and shows the download window instead of a new tab or page.

Answer 1

The easiest is to use a Server-side language like PHP. It's really discussed more in depth on this page, including some trial code for manipulating headers and such. Unfortunately, these are the only solutions until IE and Safari catch up.

Refrence:

• HTML href image link download on click

Answer 2

navigator.msSaveBlob(blob, filename)

https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331

Unfortunately I don't know a way to do it in Safari.

Answer 3

Are you working on an Apache server? If so, you can just add this to your .htaccess file:

RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{QUERY_STRING} fdl=1
RewriteRule .? - [T=application/octet-stream]

Checks to see it's a file Checks if parameter fdl=1 is in querystring Output as octet-stream/force download

Now when you want the browser to start downloading anything in that site, just put the parameter on the url:

<a href="img.jpg?fdl=1">Download Image</a>

To do the same thing on a IIS windows server add the outbound rule to the web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Force Download">
                    <match serverVariable="RESPONSE_Content_Disposition" pattern=".?" negate="false" />
                    <action type="Rewrite" value="application/octet-stream" replace="true" />
                    <conditions>
                        <add input="{QUERY_STRING}" pattern="fdl=1" />
                    </conditions>
                </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>

EDIT (10/4/2016):

Looks like the download attribute is still not fully adopted by all the browsers.

For a JavaScript / browser based implementation you could look at FileSaver.js which is a polyfill for saving functionality in browsers that don't support it. It doesn't have perfect coverage though.

Answer 4

This is a way to do it in IE with JavaScript. However, I can't find a solution for Safari yet

var canvas = document.createElement('canvas');
var img = document.createElement('img');
img.onload = function(e) {
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext('2d');
    context.drawImage( img, 0, 0, img.width, img.height);
    window.navigator.msSaveBlob(canvas.msToBlob(),'image.jpg');
}
img.src = 'img.jpg;