很早之前就知道a标签上加一个 download ，然后设置href 为文件的路径
但是这个还是只是限于你的文件在你本服务器上，而且还是相对地址的，或者是本地资源的时候

而另一种情况就是。后端只是返回一个图片的网络地址 ，然后根据这个地址让你去下载

但是再通过上面的那个方式 下载的时候，会发现 会变成预览的情况，点击就跳转
这个时候参考一篇博客的想法

1. 将图片url转换成canvas

var url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F15%2F20180715191146_WTQuT.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638442303&t=dd9f21b28649799e4e2ea709d9bbe811"
let image = new Image()
 image.setAttribute('crossOrigin', 'anonymous');
 image.src = url;
 image.onload = () => {
     var imgUrl = URL.createObjectURL(img);
     let canvas = document.createElement('canvas')
     canvas.width = image.width
     canvas.height = image.height
     let ctx = canvas.getContext('2d')
     ctx.drawImage(image, 0, 0, image.width, image.height)
 
 }

注意： 这里要讲解个东西 就是这个玩意
image.setAttribute(‘crossOrigin’, ‘anonymous’);
允许你是用跨域来的图片地址，如果不设置的话 会生成失败
或者你设置个空也行。 image.setAttribute(‘crossOrigin’, '‘);

2. canvas对象转换成blob对象

canvas.toBlob((blob) => {
   
})

3 使用URL 生成临时的路径地址

tempUrl = URL.createObjectURL(blob)

注意不用的时候记得释放哦
URL.revokeObjectURL(url)

4. 使用a标签进行下载

const download = (url) => {
     let a = document.createElement('a');
     a.download = "下载";
     a.href = url;
     a.click()
 }

我们看下效果哈

点击确实有下载了，注意看左下角哈

关注我 持续更新 前端知识。