方法1 利用a标签的download属性
html
<a href="http://xiaoniu.tp.pandabg.cn/测试.png" download="测试.png"></a>
或者
js
$(".downImg").click(function (e) {
var urlDate=$(this).prev().prev().attr("src")//图片路径
var a=document.createElement("a")//新建a标签
a.download="image"//下载下来的文件名
a.href=url
var event = new MouseEvent('click')
a.dispatchEvent(event)
}
上述方法存在跨域问题,可能点击的时候会导致打开新页面展示图片
方法2 将url转换成base64格式
使用canvas
$(".downImg").click(function (e) {//按钮点击
var imageDom=$(this).prev().prev()//图片Jquery dom
var urlDate=imageDom.attr("src")//下载的图片路径
var image=imageDom[0]//图片元素
var canvas = document.createElement('canvas')//创建canvas
canvas.width = imageDom.width()
canvas.height = imageDom.height()
var context = canvas.getContext('2d')
imageW=imageDom.width()//图片宽度
imageH=imageDom.height()//图片高度
context.drawImage(image, 0, 0,imageW ,imageH)
var url = canvas.toDataURL(urlDate)//转化为base64格式
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称
a.download = name || '下载文件的名字(自定义)'
// 将生成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
})
上述方法解决了跨域问题
附base64转blob
使用canvas
convertBase64ToBlob = (base64, fileType, slice) => {
return new Blob(
atob(base64)
.match(new RegExp(`([\s\S]{${slice}})|([\s\S]{1,${slice}})`, 'g'))
.map(function (item) {
return new Uint8Array(
item.split('').map(function (s, i) {
return item.charCodeAt(i);
})
);
}),
{ type: fileType }
);
};
//使用方式
const blob = convertBase64ToBlob(data, 'application/pdf', 1024);`
希望文章能有所帮助O(∩_∩)O