I've read through lots of questions here and tried a few things but none are working. What I want is for an image to be downloaded at the click of a button, but instead the image is opened in another tab briefly before closing again. Ideally I want to make the download automatic, but right now I want it just to work.
<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;
};
var link = document.createElement('a');
link.href = 'https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
function saveImageAs1(name, adress) {
if (confirm('CLICK')) {
window.win = open(adress);
setTimeout('win.document.execCommand("SaveAs")', 100);
setTimeout('win.close()', 500);
}
}
</script>
<body>
<form id="form1" runat="server">
<div>
<p>
<a href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" id="abc">Image</a>
</p>
</div>
</form>
</body>
<html>
<header></header>
<body>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 1</a>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 2</a>
</body>
</html>
this version is based from a different answer, it downloads something but the downloads can't be opened or viewed.
For background info I'm coding in glitch, which is an online coding site kinda like repl, on a chromebook. is it possible the problems are due to what I'm using?
You can try putting the image URL in href and download attribute like this?
<a id="download_image_1" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 1</a>
<a id="download_image_2" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 2</a>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
But be aware while download is supported by modern browsers, Chrome is now ignoring the download attribute for cross-origin content.
https://developer.chrome.com/blog/chrome-65-deprecations/#block-cross-origin-a-download