JS怎么实现浏览器点击下载图片功能

发布时间:2023-05-06 17:18:56 作者:iii
来源:亿速云 阅读:110

本篇内容介绍了“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怎么实现浏览器点击下载图片功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. js中的window.onload和jquery中的load区别是什么
  2. js怎么实现沿线的onframe行走

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:Android的Activity怎么应用

下一篇:windows DockerDeskTop最新款4.18.0怎么安装

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》