JS实现浏览器点击下载图片功能案例分析【亲测有效】
点击下载图片分两种:
1、一种是同源地址图片(也就是本地本项目中的图片);
2、另一种是不同源的图片;(不同域名下,比如阿里云 七牛云上的图片)
下面我们就具体说一下这两种图片下载的方式:
第一种(同源)下载:
利用a标签下载, a标签有一个download的属性,添加了该属性,a标签将直接下载文件,并根据download属性的值设置下载文件的文件名,不为download属性设置值则文件将以默认文件名下载:
如:
<!-- 文件名为默认名称 --> <a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download /> <!-- 文件名为baidu.gif --> <a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="baidu" /> <!-- 文件名为baidu.png --> <a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="baidu.png" />
注意,它仅支持同源链接下载,非同源链接还是会直接打开图片:
如非同源 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download />
第一种(不同源)下载:
直接上代码
var x=new XMLHttpRequest(); x.open("GET", "http://danml.com/wave2.gif", true); x.responseType = 'blob'; x.onload=function(e){ var url = window.URL.createObjectURL(x.response) var a = document.createElement('a'); a.href = url a.download = '' a.click() } x.send();
在点击事件里添加以上代码即可!亲测有效
应用案例
说明:笔者在实际开发中针对上述代码进行了测试,案例记录如下:
1.html部分,应用a链接添加时间响应,实现点击下载功能:
<a href="http://192.168.1.8:8088/imgtmp/202304191632188702.png" rel="external nofollow" onclick="saveas(this.href,'202304191632188702.png');" target="_blank"> 202304191632188702.png </a>
2.点击下载的js事件响应部分,将上文提到的下载代码封装成一个函数:
window.saveas = function(img,filename){ event.returnValue = false; let x=new XMLHttpRequest(); x.open("GET", img, true); x.responseType = 'blob'; x.onload=function(e){ let url = window.URL.createObjectURL(x.response); let a = document.createElement('a'); a.href = url a.download = filename a.click() } x.send(); }
注意:对比上文中的代码,这里的函数封装做了一定的改进,要注意两点:
①.首先 event.returnValue = false;
用来阻止默认事件;
②.a.download = ''
必须传入文件名!否则将会生成一个.json 格式的文件!
相关文章
javascript中的toFixed固定小数位数 简单实例分享
这篇文章介绍了toFixed固定小数位数的简单例子,有需要的朋友可以参考一下2013-07-07
最新评论