1. 普通url数据下载

示例：

https://wework.qpic.cn/wwpic/306595_0iIcXxBHTkKvsxV_1610689000/0

https://allpro.saas.top/1610704815878.jpg

解决方案：

// 我们可以将下载地址借助Blob转换成二进制，然后，作为a标签的href属性，配合download属性，实现下载
const link = document.createElement('a');
const url =  imageUrl;  // 要下载的路径
// 这里是将url转成blob地址，
fetch(url).then(res => res.blob()).then(blob => {
// Blob {size: 746, type: "text/html"}
  link.href = URL.createObjectURL(blob);
  console.log(link.href);
  link.download = 'picName';
  document.body.appendChild(link);
  link.click();
})

2. base64格式数据下载

解决方案：

// 添加base64前缀

const base64Url = 'data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFQ==';
const link = document.createElement('a');
link.href = base64Url;
link.download = 'picName';
link.click();

3. 当下载的图片含有动态数据时，需要我们使用canvas绘制并下载下来。

解决方案：使用vue-canvas-poster-yufan插件。

4.当需要批量下载图片时，可以采用下载压缩包的方式。

解决方案：将图片数据处理成arraybuffer类型或bold类型，使用jszip下载。