好吧,有一个像这个一样的重复问题,但已经过去了 2 年,只有一个答案不是真正的解决方案。
所以,我有一个图像(缩略图),在它下面有 2 个按钮:View
和Download
.
视图将在浏览器中打开图像(缓存)。和 下载 按钮将打开 保存图像 对话。
现在我正在使用PHP的标题Content-Disposition: attachment;
作为下载按钮。
通常,访问者会首先点击View
按钮进行预览(缩略图不是解决方案,因为需要验证详细信息和质量),尤其是对于我自己的应用程序。
现在,我真的不希望通过PHP再次读取文件,因为这需要时间。为了更好的用户体验,是否可以模拟"右键单击图像 ->将图像另存为",从而弹出下载对话框,访问者只需单击一下即可下载?
不,这是不可能的。您必须触发新请求并使用 http 标头强制下载,就像您当前所做的那样。
根据文档对象的技术规范,没有一种方法可以允许您通过JavaScript强制下载文档/文件/资源。
尝试使用这样的oncontextmenu
事件:
.HTML:
<div id="image">
YOUR IMAGE
</div>
<div id="contextmenu" style="display: none">
<ul>
<li>YOUR LINK TO DOWNLOAD IMAGE</li>
</ul>
</div>
使用 jQuery 的脚本:
var img = document.getElementById("image");
img.oncontextmenu = function(e){
e.preventDefault();
contextmenu = $("#contextmenu");
contextmenu.css("top",(e.pageY) + "px")
.css("z-index","9999")
.css("left",(e.pageX) + "px");
contextmenu.fadeIn('fast');
return false;
};
$("#image").click(function(){
$("#contextmenu").hide();
});
.CSS:
#image {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.2);
}
#contextmenu{
position:fixed;
background: white;
}
我还在这里为演示 http://jsfiddle.net/aanred/75xaU/创建小提琴。希望对您有所帮助。
试试这个
<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......" download="save-name.jpg">Click me to download the img</a>