web-dev-qa-db-fra.com

Comment faire Safari et IE télécharger l'image au lieu d'ouvrir dans une nouvelle page?

Dans Firefox et Chrome, cette propriété de lien "download = img.jpg" fonctionne correctement et affiche la fenêtre de téléchargement au lieu d'un nouvel onglet ou d'une nouvelle page. 

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

Mais dans Safari et IE, ce lien me donne une nouvelle page.

Alors, quel est le flux de travail simple et efficace pour gérer cela avec les navigateurs Safari et IE?

htmlinternet-explorerwebhyperlinksafari
20
Sakari Niittymaa

Travaillez-vous sur un serveur Apache? Si oui, vous pouvez simplement ajouter ceci à votre fichier .htaccess:

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

Vérifie si c'est un fichier Vérifie si le paramètre fdl = 1 est dans la chaîne de requête Sortie sous forme de flux d'octets/téléchargement forcé.

Maintenant, quand vous voulez que le navigateur commence à télécharger quelque chose sur ce site, il suffit de mettre le paramètre sur l'URL:

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

Pour faire la même chose sur un serveur Windows IIS, ajoutez la règle sortante au fichier 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 (04/10/2016):

On dirait que l'attribut download est toujours pas encore complètement adopté par tous les navigateurs.

Pour une implémentation JavaScript/navigateur, vous pouvez regarder FileSaver.js , qui est un outil polyvalent permettant d’enregistrer les fonctionnalités des navigateurs qui ne le prennent pas en charge. Il n'a pas une couverture parfaite cependant.

14
Nick Kuznia

C'est une façon de le faire dans IE avec JavaScript. Cependant, je ne trouve pas encore de solution pour Safari

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