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?

@RichBradshaw Thanks for the fast answer! Now I got the clue, like http://www.electrictoolbox.com/image-headers-php/ But is there easy way to handle headers with simple link and after it was pressed? Because now I have links like `Download` — Sakari Niittymaa, Sep 02 '13 at 18:10
No, the download attribute is pretty new, and isn't supported in many places. — Rich Bradshaw, Sep 02 '13 at 18:12
More specifically, see http://caniuse.com/download for information on support of the `Download` attribute. The standards-based alternative is to add a `Content-Disposition: attachment` response header on the image. — EricLaw, Sep 03 '13 at 20:31

score 14 · Accepted Answer · edited Dec 25 '17 at 16:41

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.

Actually this is best answer for now, because I'm using Apache server in this case. Thanks! — Sakari Niittymaa, Jan 20 '16 at 13:40
I would love to have an answer that doesn't involve the server, because I'm trying to have the client download a base64 image instead of opening it, and base64 would not interact with Apache. — ZomoXYZ, Oct 04 '16 at 20:00
No. They can't download anything they wouldn't already be able to download. It doesn't change any permissions. It merely changes one attribute in the response (Content Disposition). — Nick Kuznia, Nov 11 '17 at 02:46

score 0 · Answer 2 · answered Mar 07 '16 at 18:13

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;

score -1 · Answer 3 · edited May 23 '17 at 10:31

-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

edited May 23 '17 at 10:31

Community

1
1

answered Sep 02 '13 at 18:13

SITDGNymall

45
6

@SITDGNNymall Thanksfor the link. So there was already good discussion about this problem. I think that http://modernizr.com/download/#-a_download way is simple enough to do this. Need to test it out. – Sakari Niittymaa Sep 02 '13 at 18:39
I found another good post about this topic http://stackoverflow.com/questions/6796974/force-download-an-image-using-javascript – Sakari Niittymaa Sep 02 '13 at 18:56

score -1 · Answer 4 · answered Feb 23 '15 at 10:01

-1

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.

answered Feb 23 '15 at 10:01

JaffaTheCake

13,895
4
51
54

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

4 Answers4

Linked