JS实现浏览器点击下载图片功能案例分析【亲测有效】

 更新时间:2023年04月20日 09:05:46   作者:小雍雍  
这篇文章主要介绍了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 格式的文件!

相关文章

  • antd table长表格出现滚动条的操作方法

    antd table长表格出现滚动条的操作方法

    这篇文章主要介绍了antd table长表格如何出现滚动条,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JavaScript中解析JSON数据的三种方法

    JavaScript中解析JSON数据的三种方法

    这篇文章主要介绍了JavaScript中解析JSON数据的三种方法,本文讲解了eval()方法、new Function方法、JSON.parse()方法等三种方法,需要的朋友可以参考下
    2015-07-07
  • JavaScript基础篇(6)之函数表达式闭包

    JavaScript基础篇(6)之函数表达式闭包

    这篇文章主要介绍了javascript基础篇(6)之函数表达式闭包的相关资料,需要的朋友可以参考下
    2015-12-12
  • 原生js实现针对Dom节点的CRUD操作示例

    原生js实现针对Dom节点的CRUD操作示例

    这篇文章主要介绍了原生js实现针对Dom节点的CRUD操作,结合实例形式分析了javascript操作dom节点的创建、获取、增删改查等相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript函数封装随机颜色验证码(完整代码)

    JavaScript函数封装随机颜色验证码(完整代码)

    这篇文章主要介绍了JavaScript函数封装随机颜色验证码(完整代码),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • 用Javascript实现Windows任务管理器的代码

    用Javascript实现Windows任务管理器的代码

    在Windows系统上,自从98系统以来就提供了脚本宿主(Windows Scripting Host 简称WSH)的功能,WSH可以加载并运行JS和VBS脚本,并支持调用系统的COM组件,在COM组件的支持下脚本可以轻松实现非常强大的功能
    2012-03-03
  • yepnope.js 异步加载资源文件

    yepnope.js 异步加载资源文件

    yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。
    2011-09-09
  • thinkphp实现无限分类(使用递归)

    thinkphp实现无限分类(使用递归)

    这篇文章主要介绍了在使用递归的情况下thinkphp实现无限分类,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 微信小程序上传图片实例

    微信小程序上传图片实例

    这篇文章主要为大家详细介绍了微信小程序上传图片实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • WordPress中利用AJAX技术进行评论提交的实现示例

    WordPress中利用AJAX技术进行评论提交的实现示例

    这篇文章主要介绍了WordPress中利用AJAX技术进行评论提交的实现示例,整个处理的关键点在于文中的ajax_comment函数,需要的朋友可以参考下
    2016-01-01

最新评论