Tengo una aplicación que muestra una galería de fotos. Debajo de cada foto hay un botón que, cuando se hace clic, se supone que guarda la foto en la computadora del usuario. Desafortunadamente, las fotos se guardan como un documento HTML cuando se descargan. Es por eso que no se pueden abrir después de la descarga. Las fotos se almacenan en una carpeta de carga estática adjunta al proyecto mediante nodejs . ¿Cómo descargo una foto para que se guarde en el formato correcto?
Lo que ya probé es usar el atributo de download colocando la foto debajo de a etiqueta como aquí:
<a href={file.path} download>download</a>` or `<a href={file.path} download={file.name}>download</a> .
También intenté usar el módulo file-saver , pero sin resultado positivo. Con esta solución, la imagen también se guarda como un documento HTML:
const Gallery = () => { // const downloadImage = (file) => { saveAs( `http://localhost:3000${file.path}`, file.name + '.' + file.type ) } // return ( <button onClick={downloadImage(currentFile)} type='button'> download </button> ) }En react-router-dom, no tengo la ruta configurada para poder obtener una vista previa de la foto directamente después de hacer clic en la foto.
Creo que esto puede ayudarlo, llame a la función de descarga y luego pase la URL de la imagen, el nombre de la imagen después de la descarga y el tipo de imagen .
function toDataURL(url) { return fetch(url) .then((response) => { return response.blob(); }) .then((blob) => { return URL.createObjectURL(blob); }); } async function download(url, name = "download", type = "png") { const a = document.createElement("a"); a.style.display = "none"; a.href = await toDataURL(url); a.download = name + "." + type; document.body.appendChild(a); a.click(); document.body.removeChild(a); }código fuente => https://stackoverflow.com/a/56041886/11115457
descripción del código
primero cree un enlace temporal (invisible) y luego envíe una solicitud a su servidor para obtener datos de la imagen, luego configure los datos de la imagen como enlace href que creamos y luego agregue el enlace al cuerpo, necesitamos un clic virtual en este enlace usando js finalmente elimine una etiqueta de cuerpo
Listo, imagen descargada...