可通过blob对象将canvas、svg或base64图片转为可下载文件并触发浏览器下载。1. canvas用toblob()异步导出blob；2. base64需解码后构造uint8array再生成blob；3. 用url.createobjecturl()创建临时链接，a.click()触发下载，完成后调用revokeobjecturl()释放内存；4. 注意safari兼容性及ios download属性限制。
可以通过 Blob 对象将 Canvas、SVG 或 Base64 图片数据转换为可下载的文件，并触发浏览器原生下载对话框，无需后端参与。
1. 从 Canvas 获取图片数据并生成 Blob
Canvas 绘制完成后，用 toBlob() 方法直接导出为 Blob，比先转 Base64 再处理更高效、内存占用更低：
- 调用
canvas.toBlob(callback, type, quality)，例如image/png或image/jpeg - 回调函数中拿到 Blob 实例，此时可创建 URL 并触发下载
- 注意：
toBlob是异步操作，不能直接 return，需在回调内处理后续逻辑
2. 将 Base64 字符串转为 Blob 下载
若已有 Base64 图片（如上传预览或接口返回），需先解码再构造 Blob：
- 提取 Base64 数据部分（去掉
data:image/png;base64,前缀） - 用
atob()解码为原始二进制字符串 - 将每个字符转为对应 ASCII 码，存入
Uint8Array，再传给new Blob() - 推荐封装为复用函数，避免手动处理编码错误
3. 创建临时 URL 并触发下载
Blob 本身不可直接访问，需通过 URL.createObjectURL() 创建生命周期绑定的本地地址：
- 用
document.createElement('a')创建隐藏链接元素 - 设置
href为 Blob URL，download属性指定文件名（如"chart.png"） - 调用
a.click()模拟点击，浏览器自动弹出保存对话框 - 下载完成后建议调用
URL.revokeObjectURL()释放内存（尤其在频繁生成时）
4. 兼容性与注意事项
主流浏览器均支持，但细节需留意：
-
toBlob()在旧版 Safari 中不支持，可用toDataURL()+ Base64 回退方案 - 某些环境（如 iOS Safari）不支持
download属性，此时可引导用户长按链接手动保存 - 避免在循环中大量生成 Blob URL 而不释放，否则可能引发内存泄漏
- 文件名尽量不含特殊字符或空格，防止部分浏览器截断或报错
不复杂但容易忽略关键细节，重点是 Blob 创建时机、URL 生命周期管理和下载触发方式的配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
