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.
download
no surtirá efecto alguno. Mi sugerencia es que uses una llamada Ajax. Saludos