it-swarm.com.de

Wie mache ich Safari und? IE Bild herunterladen statt auf einer neuen Seite zu öffnen?

In Firefox und Chrome funktioniert diese Linkeigenschaft "download = img.jpg" einwandfrei und zeigt das Download-Fenster anstelle einer neuen Registerkarte oder Seite an. 

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

Aber in Safari und IE gibt mir dieser Link eine neue Seite.

Was ist also ein einfacher und effektiver Workflow, um dies mit Safari und IE Browsern zu erledigen?

20

Arbeiten Sie an einem Apache-Server? Wenn ja, können Sie dies einfach zu Ihrer .htaccess-Datei hinzufügen:

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

Prüft, ob es sich um eine Datei handelt Überprüft, ob der Parameter fdl = 1 in Querzeichenfolge Steht. Ausgabe als Octet-Stream/Force-Download

Nun, wenn Sie möchten, dass der Browser etwas von dieser Site herunterlädt, fügen Sie den Parameter in die URL ein:

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

Um dasselbe auf einem IIS Windows-Server zu tun, fügen Sie die ausgehende Regel zur web.config hinzu:

<?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 (04.10.2016):

Sieht aus, als wäre das download-Attribut noch nicht vollständig übernommen von allen Browsern übernommen.

Für eine JavaScript-/Browser-basierte Implementierung können Sie nach FileSaver.js suchen. Dies ist eine Füllungsfunktion zum Speichern von Funktionen in Browsern, die dies nicht unterstützen. Es hat jedoch keine perfekte Abdeckung.

14
Nick Kuznia

Dies ist eine Möglichkeit, dies in IE mit JavaScript zu tun. Ich kann jedoch noch keine Lösung für Safari finden

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;
0
mgreca