html - webkitdeveloperextras - ¿Cómo hacer que Safari e IE descarguen la imagen en lugar de abrirla en una página nueva?

ver codigo fuente en safari iphone

Question

En Firefox y Chrome, esta propiedad de enlace "download = img.jpg" funciona bien y muestra la ventana de descarga en lugar de una nueva pestaña o página.

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

Pero en Safari e IE este enlace me da una nueva página.

Entonces, ¿qué es un flujo de trabajo simple y efectivo para manejar esto con los navegadores Safari e IE?

Answer 1

¿Estás trabajando en un servidor Apache? Si es así, puedes agregar esto a tu archivo .htaccess:

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

Comprueba si es un archivo. Comprueba si el parámetro fdl = 1 está en la salida de la cadena de consulta como descarga de octeto / fuerza.

Ahora, cuando desee que el navegador comience a descargar algo en ese sitio, simplemente coloque el parámetro en la url:

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

Para hacer lo mismo en un servidor Windows de IIS, agregue la regla de salida a 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>

EDITAR (10/4/2016):

Parece que el atributo de download aún no está completamente adoptado por todos los navegadores.

Para una implementación basada en JavaScript / navegador, puede consultar FileSaver.js que es un polyfill para guardar la funcionalidad en los navegadores que no lo admiten. Aunque no tiene una cobertura perfecta.

Answer 2

Esta es una forma de hacerlo en IE con JavaScript. Sin embargo, todavía no puedo encontrar una solución para 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;

Answer 3

Lo más fácil es usar un lenguaje del lado del servidor como PHP. Realmente se analiza con mayor profundidad en esta página, incluido un código de prueba para manipular encabezados y demás. Desafortunadamente, estas son las únicas soluciones hasta que IE y Safari se pongan al día.

Refrencia:

• HTML href enlace de imagen descargar en clic

Answer 4

navigator.msSaveBlob(blob, filename)

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

Desafortunadamente no conozco una forma de hacerlo en Safari.