Come rendere Safari e IE scaricare l'immagine anziché aprirla in una nuova pagina?

Question

In Firefox e Chrome questa proprietà di collegamento "download = img.jpg" funziona correttamente e mostra la finestra di download anziché una nuova scheda o pagina.

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

Ma in Safari e IE questo collegamento mi dà una nuova pagina.

Quindi, qual è un flusso di lavoro semplice ed efficace per gestire questo con i browser Safari e IE?

Answer 1

Stai lavorando su un server Apache? Se è così, si può semplicemente aggiungere questo al vostro file .htaccess:

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

controlli per vedere che è un file Controlla se il parametro FDL = 1 è in querystring uscita come octet-stream/forza scaricare

ora, quando si desidera che il browser per iniziare a scaricare qualsiasi cosa in quel sito, basta mettere il parametro sulla url:

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

di fare la stessa cosa su un server Windows IIS aggiungere la regola in uscita per il 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 (2016/10/04):

Sembra che l'attributo download è ancora not fully adopted da tutti i browser.

Per un'implementazione basata su JavaScript/browser, è possibile visualizzare FileSaver.js che è un polifratura per il salvataggio della funzionalità nei browser che non lo supportano. Tuttavia non ha una copertura perfetta.

Answer 2

Il modo più semplice è utilizzare un linguaggio lato server come PHP. È discusso in modo approfondito in questa pagina, incluso un codice di prova per manipolare le intestazioni e così via. Sfortunatamente, queste sono le uniche soluzioni fino a quando IE e Safari non si aggiornano.

refrence:

• HTML href image link download on click

Answer 3

navigator.msSaveBlob(blob, filename) 

https://msdn.microsoft.com/sv-se/library/windows/apps/hh772331

Purtroppo non so un modo per farlo in Safari.

Answer 4

Questo è un modo per farlo in IE con JavaScript. Tuttavia, non riesco ancora a trovare una soluzione per 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;