Este es mi código:
function downloadImage(url) { fetch(url, { mode: 'no-cors', }) .then(response => response.blob()) .then(blob => { let blobUrl = window.URL.createObjectURL(blob); let a = document.createElement('a'); a.download = url.replace(/^.*[\\\/]/, ''); a.href = blobUrl; document.body.appendChild(a); a.click(); a.remove(); }) } var url = 'https://c4.wallpaperflare.com/wallpaper/203/636/834/minimalism-landscape-digital- windows-11-hd-wallpaper-preview.jpg'; downloadImage(url)Puedo descargar correctamente la imagen, pero cuando abro la imagen, aparece Lo siento, Fotos no puede abrir este archivo porque el formato no es compatible actualmente o el archivo está dañado.
Cuando uso la URL de la imagen unsplash en ese momento, funciona bien. ¿Alguien puede decirme por qué está sucediendo y cómo puedo solucionar este problema?
Haga esto porque no está definiendo el tipo MIME mientras descarga el archivo.
return fetch(urlEndpoint, options) .then((res) => res.blob()) .then((blob) => URL.createObjectURL(blob)) .then((href) => { Object.assign(document.createElement('a'), { href, download: 'filename.png', }).click(); });o bien puedes hacer esto
download(filename,url) { fetch(url, { mode: 'no-cors', }) .then(response => response.blob()) .then(blob => URL.createObjectURL(blob)) .then(uril => { var link = document.createElement("a"); link.href = uril; link.download = filename + ".png"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }); }El problema aquí es el objeto Response , se llama a fetch con mode:'no-cors' , lo que hace que el objeto de response tenga un type "opaque" y, por lo tanto, usar response.blob() dará como resultado un tamaño de Blob de 0 y Tipo de blob de "" (lea más abajo en Response.blob()).
El tipo mime se establece como se esperaba y su código funciona como se esperaba, pero dado que está realizando una solicitud de origen cruzado, obtiene Response.blob () como vacío y el archivo que guarda posteriormente ( descarga a través de la etiqueta de anclaje) no tiene datos.
Más información sobre Response.blob()
Más información sobre Response.type
para validar lo anterior, intente y console.log el blob así:
function downloadImage(url) { fetch(url, { mode: 'no-cors', }) .then(response => response.blob()) .then(blob => { console.log(blob); //log the blob and check its size; let blobUrl = window.URL.createObjectURL(blob); let a = document.createElement('a'); a.download = url.replace(/^.*[\\\/]/, ''); a.href = blobUrl; document.body.appendChild(a); a.click(); a.remove(); }) }