JS实现浏览器点击下载图片功能案例分析【亲测有效】
作者：小雍雍
这篇文章主要介绍了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 格式的文件！