利用a标签的download属性实现图片下载
代码
<img src="../download/img/test.jpg" alt="">
<a href="../download/img/test.jpg " download=""> 下载 </a>
说明:
a标签的href: 指向需要下载的图片的路径
download :添加上之后,默认下载图片,而不是浏览图片,他的属性值为下载图的名称,可选
弱点:
很多时候,会不兼容,导致直接打开图片,而不会下载
目前测试download可以直接下载的有:
xlsx表格文件
zip压缩包
目前已经遇到无法直接下载,或者不稳定是否可以下载的
在线图片
.txt文件
将链接地址字符内容转变成blob地址,用js实现图片下载
代码:
<a>下载</a>
<script>
var url =
'https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2018-12-17/fc54f3e21b5ceb71e262b5186d8e9f40.jpg'
let a = document.querySelector('a')
a.onmouseover = function () {
//这里如果直接用click事件的话,第一次点击是将url转成blob地址,
//第二次点击才会下载,所以这里改为mouseover,而a的点击事件依然有效
fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob);
a.download = 'test.jpg';
document.body.appendChild(a);
});
}
</script>
缺点:
根据目前的方法,以及个人的测试,这个方法目前只支持下载以"http" 或者 "https"请求的图片,否则会报:
. URL scheme must be “http” or “https” for CORS request
版权声明:本文为weixin_43410419原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。