原生js中:
<img src="./boy.png" class="img1"></img>
<input type="button" value="下载" onclick="down('img1')">
function down(selector, name) {
// 生成一个a元素
var a = document.createElement('a')
// 将a的download属性设置为我们想要下载的图片名称
a.download = name || 'pic'
// 将生成的URL设置为a.href属性
a.href = './boy.png'
// 触发a的单击事件
a.click();
}
注意⚠️:图片和html文件要是同源,不然会失效。
vue中:
<div>
<img src="../../../img/logo.png" alt="">
<p @click="downs">下 载</p>
</div>
data{
imgs:require("../../../img/logo.png")
}
methods:{
downs() {
//必须同源才能下载
var alink = document.createElement("a");
alink.href = this.imgs;
alink.download = "pic"; //图片名
alink.click();
}
}
注意⚠️:图片和html文件要是同源,不然会失效。
附上:a标签使用方法详解