JS实现浏览器点击下载图片

点击下载图片分两种：
1、一种是同源地址图片（也就是本地本项目中的图片）；
2、另一种是不同源的图片；（不同域名下，比如阿里云七牛云上的图片）

下面我们就具体说一下这两种图片下载的方式：
第一种（同源）下载：
利用a标签下载， a标签有一个download的属性，添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不为download属性设置值则文件将以默认文件名下载:

如：

<!-- 文件名为默认名称 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 文件名为baidu.gif -->
<a href="./baidu_jgylogo3.gif" download="baidu" />
<!-- 文件名为baidu.png -->
<a href="./baidu_jgylogo3.gif" 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 = urla.download = ''a.click()}x.send();

在点击事件里添加以上代码即可！亲测有效

有帮助的码客们点赞呦！

JS实现浏览器点击下载图片相关推荐

js如何在浏览器中运行php文件下载,JavaScript_用JS在浏览器中创建下载文件，但受限于浏览器，很多情况下 - phpStudy...
用JS在浏览器中创建下载文件但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: file.js 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件 ...
运用canvas将两张图片画在一起，生成一张新的图片，然后实现点击下载图片
运用canvas将两张图片img1,img2画在一起,生成一张新的图片img3,然后实现点击下载图片img3 代码如下: <!DOCTYPE html> <html lang=&qu ...
HTML里的a链接download 属性浏览器js点击下载图片
1.<a>download下载图片具有兼容性所以需做兼容处理,使其兼容IE,就比较完美了. 2.最近有这方面的需求,从网上看了一些资料,拿过来不能直接使用,把他们整合了一下,作为笔记,方 ...
【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...
前端实现点击下载图片
方法一:使用a标签的download属性. <a href="1.jpg" download="1.jpg">下载图片</a> 注意: ...
用PHP实现浏览器点击下载各种格式文档的方法详解【txt apk等等】
[[注:其他文件想设置成下载文件,和下面介绍的方法一致]] 由于现在的浏览器已经可以识别txt文档格式,如果只给txt文档做一个文字链接的话,点击后只是打开一个新窗口显示txt文件的内容,并不能实现点 ...
JS 实现跨域外链下载图片（不支持IE）
跨域需要服务器设置 function ddd(){// ES6 语法let src = 'https://fenmul.github.io/Sin.gtihub.io/images/qrcode.bm ...
火狐浏览器点击下载按钮没反应
本人习惯使用火狐浏览器,最近突然出现点击下载按钮后,没有弹出下载弹窗,下载不了任何东西,网上也查看了很多别人的方法,不怎么管用,后来自己研究进行了一些操作,修复了下载功能,步骤如下: 1.火狐浏览器安 ...
【vue下载】vue 点击下载图片直接打开问题解决
问题: 点击下载按钮,用a标签的download属性,会在当前页直接打开图片使用base64转换也还是如此最后用了blob转换,问题解决 <el-button type="text ...

JS实现浏览器点击下载图片

JS实现浏览器点击下载图片相关推荐

最新文章

热门文章