javascript - link - Forzar navegador para descargar archivos de imagen al hacer clic
descargar archivo javascript (10)
Leeroy y Richard Parnaby-King:
ACTUALIZACIÓN: A partir de la primavera de 2018, esto ya no es posible para los hrefs de origen cruzado. Por lo tanto, si desea crear en un dominio que no sea imgur.com, no funcionará según lo previsto. Anuncio de desaprobaciones y eliminaciones de Chrome
function forceDownload(url, fileName){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement(''a'');
tag.href = imageUrl;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
Necesito que el navegador descargue los archivos de imagen tal como lo hace mientras hace 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 (lo que hacen los navegadores)?
Esta es una solución general a su problema. Pero hay una parte muy importante que la extensión de archivo debe coincidir con su codificación. Y, por supuesto, ese parámetro de contenido de la función downlowadImage debería ser una cadena codificada en base64 de su imagen.
const clearUrl = url => url.replace(/^data:image///w+;base64,/, '''');
const downloadImage = (name, content, type) => {
var link = document.createElement(''a'');
link.style = ''position: fixed; left -10000px;'';
link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
link.download = //./w+/.test(name) ? name : `${name}.${type}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
[''png'', ''jpg'', ''gif''].forEach(type => {
var download = document.querySelector(`#${type}`);
download.addEventListener(''click'', function() {
var img = document.querySelector(''#img'');
downloadImage(''myImage'', clearUrl(img.src), type);
});
});
a gif image: <image id="img" src="data:image/gif;base64,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" />
<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>
Logré hacer que esto funcionara también en Chrome y Firefox al agregar un enlace al documento.
var link = document.createElement(''a'');
link.href = ''images.jpg'';
link.download = ''Download.jpg'';
document.body.appendChild(link);
link.click();
No necesita escribir js para hacer eso, simplemente use:
<a href="path_to/image.jpg" alt="something">Download image</a>
Y el navegador en sí 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:
<a href="path_to/image.jpg" download="myImage">Download image</a>
Prueba esto:
<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>
Usando HTML5 puedes agregar el atributo ''descargar'' a tus enlaces.
<a href="/path/to/image.png" download>
Los navegadores compatibles luego solicitarán descargar la imagen con el mismo nombre de archivo (en este ejemplo image.png).
Si especifica un valor para este atributo, ese será el nuevo nombre de archivo:
<a href="/path/to/image.png" download="AwesomeImage.png">
ACTUALIZACIÓN: A partir de la primavera de 2018 esto ya no es posible para href s de origen cruzado . Por lo tanto, si desea crear <a href="https://i.imgur.com/IskAzqA.jpg" download> en un dominio que no sea imgur.com, no funcionará según lo previsto. Anuncio de desaprobaciones y eliminaciones de Chrome
encontre eso
<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>
no funcionó para mí No estoy seguro por qué.
Descubrí que puede incluir un parámetro ?download=true al final de su enlace para forzar una descarga. Creo que noté que Google Drive usa esta técnica.
En su enlace, incluya ?download=true al final de su href.
También puede usar esta técnica para establecer el nombre de archivo al mismo tiempo.
En su enlace, incluya ?download=true&filename=My_Image_File.jpeg al final de su href.
Actualización Primavera 2018
<a href="/path/to/image.jpg" download="FileName.jpg">
Si bien esto todavía es compatible, a partir de febrero de 2018, Chrome deshabilitó esta función para la descarga entre orígenes, lo que significa que solo funcionará si el archivo está ubicado en el mismo nombre de dominio.
Descubrí una solución para descargar imágenes de dominio cruzado después de la nueva actualización de Chrome que deshabilitaba la descarga de dominios cruzados. Puede modificar esto en una función que se adapte a sus necesidades. Es posible que pueda obtener la imagen mime-type (jpeg, png, gif, etc.) con más investigación si es necesario. Puede haber una manera de hacer algo similar a esto con videos también. ¡Espero que esto ayude a alguien!
Leeroy y Richard Parnaby-King:
ACTUALIZACIÓN: A partir de la primavera de 2018, esto ya no es posible para los hrefs de origen cruzado. Por lo tanto, si desea crear en un dominio que no sea imgur.com, no funcionará según lo previsto. Anuncio de desaprobaciones y eliminaciones de Chrome
var image = new Image();
image.crossOrigin = "anonymous";
image.src = "http://is3.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn''t contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(//|//)/g).pop();
image.onload = function () {
var canvas = document.createElement(''canvas'');
canvas.width = this.naturalWidth; // or ''width'' if you want a special/scaled size
canvas.height = this.naturalHeight; // or ''height'' if you want a special/scaled size
canvas.getContext(''2d'').drawImage(this, 0, 0);
var blob;
// ... get as Data URI
if (image.src.indexOf(".jpg") > -1) {
blob = canvas.toDataURL("image/jpeg");
} else if (image.src.indexOf(".png") > -1) {
blob = canvas.toDataURL("image/png");
} else if (image.src.indexOf(".gif") > -1) {
blob = canvas.toDataURL("image/gif");
} else {
blob = canvas.toDataURL("image/png");
}
$("body").html("<b>Click image to download.</b><br><a download=''" + fileName + "'' href=''" + blob + "''><img src=''" + blob + "''/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
var myDiv = document.getElementById(''Div_contain_image'');
var myImage = myDiv.children[0];
linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt=''MyImage''></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>
var pom = document.createElement(''a'');
pom.setAttribute(''href'', ''data:application/octet-stream,'' + encodeURIComponent(text));
pom.setAttribute(''download'', filename);
pom.style.display = ''none'';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);