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.

<a href="img.jpg" download="img.jpg">Download Image</a>

But in Safari and IE this link gives me a new page.

So what is a simple and effective workflow to handle this with Safari and IE browsers?

Answer 1

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.