Quiero crear un botón de descarga que descargue la imagen de la API, pude hacerlo pero luego me quedé atascado en un problema. cada vez que hago clic en el botón de descarga, descarga la imagen pero también abre la imagen en esa página, lo que hace que salga de la página principal. Lo quiero para que no abra la imagen solo descargue la imagen.
Aquí esta lo que hice
const download = (e) => { console.log(e.target.href); fetch(e.target.href, { method: "GET", headers: {}, }) .then((response) => { response.arrayBuffer().then(function (buffer) { const url = window.URL.createObjectURL(new Blob([buffer])); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "image.png"); //or any other extension document.body.appendChild(link); link.click(); }); }) .catch((err) => { console.log(err); }); }; <div className="row"> <div className="col-sm-4 text-center"> {quote?.map((items) => ( <div class="card" style={{ width: "18rem;" }}> <img src={items.img} class="card-img-top" alt="..." /> <div class="card-body"> <h5 style={{ textTransform: "capitalize" }} class="card-title"> {items.name.replace(/_/g, " ")} </h5> <p class="card-text">{items.disc}</p> <Button variant="outlined" href={items.img} onClick={ download } > Download </Button> </div> </div> ))} </div> </div>La solución del lado del cliente solo funcionaría si la imagen solicitada NO está bloqueada por la política CORS.
async function download(url) { const a = document.createElement("a"); a.href = await toDataURL(url); a.download = "myImage.png"; document.body.appendChild(a); a.click(); document.body.removeChild(a); } function toDataURL(url) { return fetch(url) .then((response) => { return response.blob(); }) .then((blob) => { return URL.createObjectURL(blob); }); } function onClick() { download("https://github.githubassets.com/images/modules/profile/badge--acv-64.png"); }Demostración de trabajo completa en codesandbox
Si tiene acceso al servidor, puede agregar un encabezado Content-disposition y luego simplemente hacer window.open(url, '_self') descargaría la imagen:
NGINX - add_header Content-disposition "attachment; filename=$1";