jQuery 强制浏览器在单击时下载图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17527713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Force browser to download image files on click
提问by Amit
I need the browser to download the image files just as it does while clicking on an Excel sheet.
我需要浏览器像单击 Excel 工作表一样下载图像文件。
Is there a way to do this using client-side programming only?
有没有办法只使用客户端编程来做到这一点？
<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>
How should it work in case of downloading an Excel sheet (what browsers do)?
在下载 Excel 表格的情况下它应该如何工作（浏览器做什么）？
回答by Richard Parnaby-King
Using HTML5 you can add the attribute 'download' to your links.
使用 HTML5，您可以将“下载”属性添加到您的链接中。
<a href="/path/to/image.png" download>
<a href="/path/to/image.png" download>
Compliant browsers will then prompt to download the image with the same file name (in this example image.png).
然后，兼容的浏览器将提示下载具有相同文件名的图像（在此示例中为 image.png）。
If you specify a value for this attribute, then that will become the new filename:
如果您为此属性指定一个值，那么它将成为新的文件名：
<a href="/path/to/image.png" download="AwesomeImage.png">
<a href="/path/to/image.png" download="AwesomeImage.png">
UPDATE:As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create <a href="https://i.imgur.com/IskAzqA.jpg" download>on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement
更新：从 2018 年春季开始，这不再适用于跨域hrefs。因此，如果您想<a href="https://i.imgur.com/IskAzqA.jpg" download>在 imgur.com 以外的域上创建，它将无法按预期工作。Chrome 弃用和移除公告
回答by DrowsySaturn
I managed to get this working in Chrome and Firefox too by appending a link to the to document.
通过将链接附加到文档，我也设法在 Chrome 和 Firefox 中使用它。
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
回答by iXs
Leeroy & Richard Parnaby-King:
UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement
Leeroy & Richard Parnaby-King：
更新：从 2018 年春季开始，这不再适用于跨域 hrefs。因此，如果您想在 imgur.com 以外的域上创建，它将无法按预期工作。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();
}
回答by Riley Bell
Update Spring 2018
2018 年春季更新
<a href="/path/to/image.jpg" download="FileName.jpg">
While this is still supported, as of February 2018 chrome disabled this feature for cross-origin downloading meaning this will only work if the file is located on the same domain name.
虽然这仍然受支持，但截至 2018 年 2 月，chrome 禁用了跨源下载的此功能，这意味着这仅在文件位于同一域名上时才有效。
I figured out a workaround for downloading cross domain images after Chrome's new update which disabled cross domain downloading. You could modify this into a function to suit your needs. You might be able to get the image mime-type (jpeg,png,gif,etc) with some more research if you needed to. There may be a way to do something similar to this with videos as well. Hope this helps someone!
在 Chrome 禁用跨域下载的新更新之后，我想出了一种下载跨域图像的解决方法。您可以将其修改为一个函数以满足您的需要。如果需要，您可以通过更多研究获得图像 mime 类型（jpeg、png、gif 等）。也可能有一种方法可以对视频执行类似的操作。希望这可以帮助某人！
Leeroy & Richard Parnaby-King:
UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement
Leeroy & Richard Parnaby-King：
更新：从 2018 年春季开始，这不再适用于跨域 hrefs。因此，如果您想在 imgur.com 以外的域上创建，它将无法按预期工作。Chrome 弃用和移除公告
var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.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>回答by Sadi
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);
回答by hakobpogh
This is a general solution to your problem. But there is one very important part that the file extension should match your encoding. And of course, that content parameter of downlowadImage function should be base64 encoded string of your image.
这是您问题的通用解决方案。但是有一个非常重要的部分是文件扩展名应该与您的编码相匹配。当然， downlowadImage 函数的 content 参数应该是图像的 base64 编码字符串。
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>回答by Emerica
A more modern approach using Promise and async/await :
使用 Promise 和 async/await 的更现代方法：
toDataURL(url) {
return fetch(url).then((response) => {
return response.blob();
}).then(blob => {
return URL.createObjectURL(blob);
});
}
then
然后
async download() {
const a = document.createElement("a");
a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
a.download = "myImage.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
Find documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
在此处查找文档：https: //developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
回答by Muhammad Awais
Try this:
尝试这个：
<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>
回答by Engr Zardari
<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>
回答by vinod
You can directly download this file using anchor tagwithout much code.
Copy the snippet and paste in your text-editor and try it...!
您可以使用锚标记直接下载此文件，无需太多代码。
复制代码片段并粘贴到您的文本编辑器中，然后尝试...！
<html>
<head>
</head>
<body>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
<a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
</div>
</body>
</html>