您好,登录后才能下订单哦!
本篇内容介绍了“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="https://cache.yisu.com/upload/information/20230420/112/138463.gif" download />
直接上代码
var x=new XMLHttpRequest(); x.open("GET", "https://cache.yisu.com/upload/information/20230420/112/138464.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 格式的文件!
“JS怎么实现浏览器点击下载图片功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。