强制浏览器点击下载图像文件
我需要浏览器下载图像文件，就像在Excel表单上单击一样。
反正有这样做只使用客户端编程？
<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> 任何人都可以帮助我下载Excel表格（浏览器）的工作情况。
使用HTML5，您可以将属性“下载”添加到您的链接。
<a href="/path/to/image.png" download>
顺从的浏览器会提示下载具有相同文件名的图像（在这个例子中是image.png）。
如果你为这个属性指定了一个值，那么这将成为新的文件名：
<a href="/path/to/image.png" download="AwesomeImage.png">
我设法通过在文档中附加链接来在Chrome和Firefox中实现这一function。
var link = document.createElement('a'); link.href = 'images.jpg'; link.download = 'Download.jpg'; document.body.appendChild(link); link.click();
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);
这是您的问题的一般解决scheme。 但文件扩展名应该与您的编码匹配的一个非常重要的部分。 当然，downlowadImage函数的内容参数应该是图像的base64编码string。
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>
尝试这个：
<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>
<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>
我find
<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>
没有为我工作。 我不知道为什么。
我发现你可以在链接的最后加上一个?download=true参数来强制下载。 我想我注意到Google Drive使用了这种技术。
在你的链接中，在你的href结尾包含?download=true 。
您也可以使用这种技术来同时设置文件名。
在你的链接中，在你的href结尾包含?download=true&filename=My_Image_File.jpeg 。
你不需要写js来做到这一点，只需使用：
<a href="path_to/image.jpg" alt="something">Download image</a>
而浏览器本身会自动下载图片。
如果由于某种原因不起作用，请添加下载属性。 有了这个属性，你可以为可下载的文件设置一个名字：
<a href="path_to/image.jpg" download="myImage">Download image</a>
