JS实现浏览器点击下载图片功能案例分析【亲测有效】
本文详细解析了JavaScript实现浏览器图片下载的两种场景:同源与跨域。对于同源图片,利用HTML5 a标签的download属性即可直接下载;对于跨域图片,则需通过XMLHttpRequest获取Blob对象,动态创建a标签并触发点击来实现。文章提供了完整的代码示例及函数封装技巧,重点强调了阻止默认事件和指定文件名的必要性,确保下载功能在实际开发中有效运行。
实现图片下载功能主要分为两种情况:第一种是处理同源地址的图片,即位于本地项目中的资源;第二种是处理不同源的图片,例如托管在阿里云或七牛云等第三方域名下的资源。
接下来将具体阐述针对这两种不同场景的图片下载实现方式。
第一种情况:同源图片下载。
可以通过HTML中的a标签实现下载功能。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. JavaScript部分:将前述下载逻辑封装为一个独立函数,以便在点击事件中调用。
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怎么实现页面强制刷新
2026-11-05 14:53:38
点击JS链接直接运行不下载?前端实现.js文件强制下载的三种方法
2026-11-05 12:12:23
怎么封装一个通用的JS创建元素辅助函数
2026-11-05 11:41:41
Swiper.js 怎么监听滑动结束并获取当前索引
2026-11-05 10:57:15
HTML、CSS和JS的关系:Web前端三件套怎么协作
2026-11-04 15:41:40
