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 格式的文件!

相关文章

  • JavaScript使用闭包模仿块级作用域操作示例

    JavaScript使用闭包模仿块级作用域操作示例

    这篇文章主要介绍了JavaScript使用闭包模仿块级作用域操作,结合实例形式分析了javascript闭包的原理及模仿块级作用域相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 基于JS实现计算24点算法代码实例解析

    基于JS实现计算24点算法代码实例解析

    这篇文章主要介绍了基于JS实现计算24点算法代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JavaScript实现搜索框的自动完成功能(一)

    JavaScript实现搜索框的自动完成功能(一)

    在很多需要搜索的网站, 都会有一个自动完成的搜索框. 方便用户查找他们想要的搜索词. 帮助用户快速找到自己想要的结果.接下来通过本文给大家介绍JavaScript实现搜索框的自动完成功能(一),需要的朋友参考下吧
    2016-02-02
  • JS弹出对话框实现方法(三种方式)

    JS弹出对话框实现方法(三种方式)

    这篇文章主要介绍了JS弹出对话框实现方法,结合实例形式分析了三种方式,包括alert、confirm及prompt,非常简单实用,需要的朋友可以参考下
    2015-12-12
  • jquery根据锚点offset值实现动画切换

    jquery根据锚点offset值实现动画切换

    点击后僵硬的切换是不是很不爽,下面为大家介绍的是根据锚点offset值来实现动画切换,喜欢的朋友不要错过
    2014-09-09
  • javascript实现列表滚动的方法

    javascript实现列表滚动的方法

    这篇文章主要介绍了javascript实现列表滚动的方法,较为详细的分析了javascript实现列表滚动的页面布局及javascript滚动效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • Javascript加载速度慢的解决方案

    Javascript加载速度慢的解决方案

    在网站里面会加载一些js代码,统计啊,百度广告等等,结果弄得页面加载速度很慢,下面有个不错的解决方法,大家可以参考下
    2014-03-03
  • JS如何显示防盗链的外站图片技巧示例

    JS如何显示防盗链的外站图片技巧示例

    通常在开发测试环节,一些资源图片会出现防盗链的错误提示,本文就通过前端基础技术,实现基本的图片跨站显示效果,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 微信小程序实现双层嵌套菜单栏

    微信小程序实现双层嵌套菜单栏

    这篇文章主要为大家详细介绍了微信小程序实现双层嵌套菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript中的toFixed固定小数位数 简单实例分享

    javascript中的toFixed固定小数位数 简单实例分享

    这篇文章介绍了toFixed固定小数位数的简单例子,有需要的朋友可以参考一下
    2013-07-07

最新评论