使用客户端编程强制浏览器下载图像
背景
单击时Excel 工作表或其他可下载文件,浏览器通常会无缝启动下载过程。但是,需要专门针对图像文件复制此行为。
实现图像下载
单独使用客户端编程,可以实现图像下载,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.innerHTML == "Image" ) {
var name = element.nameProp;
var address = element.href;
saveImageAs1(element.nameProp, element.href);
return false;
}
else
return true;
};
function saveImageAs1(name, address) {
if (confirm( 'you wanna save this image?' )) {
window.win = open(address);
setTimeout( 'win.document.execCommand("SaveAs")' , 100);
setTimeout( 'win.close()' , 500);
}
}
|
登录后复制
此代码拦截图像元素上的单击事件,并提示用户使用“另存为”对话框保存它
Excel 下载的情况
对于 Excel 下载,浏览器在内部处理下载过程。它们根据 MIME 类型识别文件类型,并触发适当的下载行为,无需任何额外的编程。
HTML5 'download' 属性
但是,较新的浏览器支持 的“下载”属性元素,它提供了更方便的方式来启动图像下载:
1 | <a href= "http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>
|
登录后复制
此属性提示浏览器使用提供的文件名或原始文件名(如果未指定)下载图像。请注意,出于安全考虑,自 2018 年起不再支持使用此方法的跨源下载。
以上是如何使用客户端编程强制浏览器下载图像?的详细内容。更多信息请关注PHP中文网其他相关文章!