1

El siguiente código me permite descargar imágenes al pulsarlas, pulsando encima de ellas una vez que se abran en una nueva pestaña. Sin embargo, cuando pulso encima eso no ocurre. ¿Alguna solución?

var z5=document.getElementsByClassName('hola');
var num = Number(prompt('¿Cuántas fotos quieres capturar?'));
var vent=window.open()
vent.document.write("<h2 style='font-family:Helvetica;'>Haz click en las fotos que quieres descargar</h2>");
for(let i=0;i<num;i++) {
 vent.document.write("<a href="+ z5[i].src +" download><img src="+ z5[i].src +"></a><br>");
}
<img class="hola" src="https://www.gravatar.com/avatar/2f998699bdeb60bf8ad7ac9fa95da9e8?s=32&d=identicon&r=PG&f=1">
<img src="https://i.sstatic.net/mp4J8.png?s=32" class="hola">

0

1 respuesta 1

1

He probado tu código y funciona si lo ejecutas desde tu propio servidor web y las imágenes están alojadas en ese mismo servidor.

Dicho de otra forma, esto solo funciona en Chrome y en Firefox si las imágenes tienen el mismo origen:

Si miras en este enlace: https://caniuse.com/#feat=download en la parte de known issues vas a ver que:

  • Chrome 65 and above only supports same-origin download links.
  • Firefox only supports same-origin download links.

Para no dejar esto como un "no se puede hacer". Si que hay formas de hacer posible el resultado final, que es que se pueda bajar una imagen remota, pero necesitarás el respaldo de un backend.

La idea sería que en tu backend creases un servicio que pasándole una URL de una imagen, la descargase, y te la devolviese con sus cabeceras correspondientes como si se realizase una descarga convencional (Content-Disposition: attachment). Hay un ejemplo en php en este enlace:

https://stackoverflow.com/questions/56753904/image-download-in-a-href-using-download-attribute-but-not-working-image-url-on-o/56755666

De esta manera, la descarga de la imagen a efectos de tu aplicación JavaScript se haría en el mismo origen, aunque tu backend la esté descargando remotamente.

Más info:

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.