How to make Safari and IE download image instead o

问题:

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?

回答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.

回答2:

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;

回答3:

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

回答4:

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.