Necesito que el navegador descargue los archivos de imagen tal como lo hace al hacer clic en una hoja de Excel.
¿Hay alguna forma de hacer esto usando solo la programación del lado del cliente?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js">
$(document).ready(function () {
$("*").click(function () {
$("p").hide();
});
});
</script>
</head>
<script type="text/javascript">
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.innerHTML == "Image") {
//someFunction(element.href);
var name = element.nameProp;
var address = element.href;
saveImageAs1(element.nameProp, element.href);
return false; // Prevent default action and stop event propagation
}
else
return true;
};
function saveImageAs1(name, adress) {
if (confirm('you wanna save this image?')) {
window.win = open(adress);
//response.redirect("~/testpage.html");
setTimeout('win.document.execCommand("SaveAs")', 100);
setTimeout('win.close()', 500);
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<p>
<a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
<a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
</p>
</div>
</form>
</body>
</html>¿Cómo debería funcionar en caso de descargar una hoja de Excel (qué hacen los navegadores)?
javascript
jquery
html
Amit
fuente
fuente
downloadatributo.Respuestas:
Usando HTML5 puede agregar el atributo 'descargar' a sus enlaces.
<a href="https://stackoverflow.com/path/to/image.png" download>Los navegadores compatibles le solicitarán que descargue la imagen con el mismo nombre de archivo (en este ejemplo image.png).
Si especifica un valor para este atributo, se convertirá en el nuevo nombre de archivo:
<a href="https://stackoverflow.com/path/to/image.png" download="AwesomeImage.png">UPDATE: A partir de la primavera 2018 esto ya no es posible para la cruz-origen
hrefs . Entonces, si desea crear<a href="https://i.imgur.com/IskAzqA.jpg" download>en un dominio que no sea imgur.com, no funcionará como se esperaba. Anuncio de eliminación y desactivación de Chromefuente
Logré que esto funcionara en Chrome y Firefox también agregando un enlace al documento.
fuente
document.body.appendChild(link), no funcionará en Firefox. También es bueno eliminar el elemento creado condocument.body.removeChild(link);afterlink.click()setTimeout( function () { link.parentNode.removeChild( link ); },10 );fuente
Actualización primavera 2018
Si bien esto todavía es compatible, a partir de febrero de 2018 Chrome deshabilitó esta función para la descarga de origen cruzado, lo que significa que solo funcionará si el archivo se encuentra en el mismo nombre de dominio.
Descubrí una solución alternativa para descargar imágenes entre dominios después de la nueva actualización de Chrome que deshabilitó la descarga entre dominios. Puede modificar esto en una función que se adapte a sus necesidades. Es posible que pueda obtener la imagen de tipo mime (jpeg, png, gif, etc.) con un poco más de investigación si es necesario. También puede haber una forma de hacer algo similar a esto con videos. ¡Espero que esto ayude a alguien!
fuente
Un enfoque más moderno usando Promise y async / await:
luego
Encuentre documentación aquí: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
fuente
fuente
Ésta es una solución general a su problema. Pero hay una parte muy importante de que la extensión del archivo debe coincidir con su codificación. Y, por supuesto, ese parámetro de contenido de la función downlowadImage debe ser una cadena codificada en base64 de su imagen.
fuente
Prueba esto:
fuente
En 2020 utilizo Blob para hacer una copia local de la imagen, que el navegador descargará como un archivo. Puedes probarlo en este sitio .
fuente
fuente
Puede descargar este archivo directamente usando una etiqueta de anclaje sin mucho código.
Copie el fragmento y péguelo en su editor de texto y pruébelo ...!
fuente
¿Qué pasa con el uso de la función .click () y la etiqueta?
(Versión comprimida)
Ahora puedes activarlo con js. ¡Tampoco abre, como otros ejemplos, archivos de imagen y texto!
(versión de función js)
fuente
encontre eso
<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>no funcionó para mí. No estoy seguro de por qué.
Descubrí que puede incluir un
?download=trueparámetro al final de su enlace para forzar una descarga. Creo que noté que Google Drive utiliza esta técnica.En su enlace, incluya
?download=trueal final de su href.También puede utilizar esta técnica para establecer el nombre del archivo al mismo tiempo.
En su enlace, incluya
?download=true&filename=My_Image_File.jpegal final de su href.fuente
No necesita escribir js para hacer eso, simplemente use:
Y el propio navegador descargará automáticamente la imagen.
Si por alguna razón no funciona, agregue el atributo de descarga. Con este atributo puede establecer un nombre para el archivo descargable:
fuente
downloadatributo no es compatible con todos los navegadores.