1

Hice un código para que se puedan descargar imágenes, (etiqueta download dentro de ), pero no funciona ¿que hago?

    <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/230px-HTML5_logo_and_wordmark.svg.png" download="Imagen_HTML.png">
    Descargar en PNG
</a>
3
  • 1
    De las notas de la documentación: Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs) Por lo tanto, a menos que tu página esté alojada directamente en el mismo host, puerto y protocolo que la imagen, el atributo download no surtirá efecto alguno. Mi sugerencia es que uses una llamada Ajax. Saludos Commented el 11 oct. 2020 a las 20:21
  • @MauricioContreras pon eso como respuesta
    – Alvaro Montoro
    Commented el 14 oct. 2020 a las 23:50
  • 1
    @AlvaroMontoro listo. Saludos Commented el 15 oct. 2020 a las 21:07

1 respuesta 1

1

PROBLEMA

Según la documentación del atributo download:

Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs)

Eso quiere decir, que si el atributo href del elemento anchor (<a>) apunta a una dirección diferente al dominio al que pertenece el documento, el atributo download simplemente será ignorado.

Por lo tanto, la única forma en que el atributo download funcione, es que tu página esté alojada en el mismo host, puerto y protocolo al que pertenece la imagen que deseas descargar.

SOLUCIÓN

Para lograr que la imagen se descargue, puedes usar una llamada AJAX, utilizando Javascript y alguna de las tecnologías disponibles para hacerla XMLHttpRequest (XHR), Fetch, JQuery Ajax, entre otras.

Ejemplos:

HTML

<a class="downloadLink"
   id="downloadImage"
   data-url="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/230px-HTML5_logo_and_wordmark.svg.png"
   data-type="image/png"
   data-file-name="230px-HTML5_logo_and_wordmark.svg.png"
  >Descargar en PNG
</a>

CSS

.downloadLink {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

Javascript

Usando XMLHttpRequest

const downloadLink = document.getElementById('downloadImage');

const onResponse = function(e) {
  if (this.readyState == 4) {
    if (this.status == 200) {
      const blob = new Blob([this.response], {type: downloadLink.dataset.type});
      let temporalAnchor = document.createElement('a');
      temporalAnchor.style = 'display: none';
      document.body.appendChild(temporalAnchor);
      let localURL = window.URL.createObjectURL(blob);
      temporalAnchor.href = localURL;
      temporalAnchor.download = downloadLink.dataset.fileName;
      temporalAnchor.click();
      window.URL.revokeObjectURL(localURL);
      document.body.removeChild(temporalAnchor);
    } else {
      console.log('Algo salió mal');
    }
  }
}

const doDownload = event => {
  const remoteURL = event.currentTarget.dataset.url;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', remoteURL, true);
  xhr.responseType = 'blob';
  xhr.send(null);
  xhr.onreadystatechange = onResponse;
}

downloadLink.addEventListener('click', doDownload);

Usando Fetch:

const downloadLink = document.getElementById('downloadImage');
const doDownload = event => {
  const remoteURL = event.currentTarget.dataset.url;
  fetch(remoteURL)
  .then(response => {
    if(response.ok) {
      response.blob()
      .then(blob => {
        let localURL = window.URL.createObjectURL(blob);
        let temporalAnchor = document.createElement('a');
        temporalAnchor.style = 'display: none';
        document.body.appendChild(temporalAnchor);
        temporalAnchor.href = localURL;
        temporalAnchor.download = downloadLink.dataset.fileName;
        temporalAnchor.click();
        window.URL.revokeObjectURL(localURL);
        document.body.removeChild(temporalAnchor);
      })
      .catch(error => {
        console.error(error.message);
      });
    } else {
      console.log('Algo salió mal');
    }
  })
  .catch(error => {
    console.error(error.message);
  });
}

downloadLink.addEventListener('click', doDownload);

Espero que esto te ayude a resolver el problema.

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.