
本文介绍如何使用纯 javascript(无需后端)实现点击按钮即下载远程 url 的二维码图片,核心是利用 `fetch` 获取图像 blob 并通过动态 `` 标签触发浏览器原生下载。
在 Web 开发中,常需将动态生成的二维码(如来自 QuickChart、QRCode Monkey 等服务)直接提供给用户下载。由于该二维码以图片形式托管在第三方 URL 上(例如 https://quickchart.io/qr?...),我们无需 PHP 服务端中转——现代浏览器完全支持通过前端 JavaScript 完成「获取 → 转换 → 下载」全流程。
以下是完整、健壮的一键下载实现:
✅ 关键说明与最佳实践:
- ✅ URL 编码修复:原始问题中的 URL 包含错误的 ¢erImageSizeRatio(应为 centerImageSizeRatio),已修正;特殊字符(如 &)无需手动编码,fetch 会自动处理。
- ✅ 文件类型智能识别:通过响应头 Content-Type 自动确定扩展名(如 image/svg+xml → .svg),避免硬编码 .png 导致 Safari 等浏览器保存失败。
- ✅ 内存安全:每次调用 URL.createObjectURL() 后必须配对调用 URL.revokeObjectURL(),防止内存泄漏。
- ✅ 错误防御:添加 HTTP 状态校验与 try/catch,确保网络异常、跨域拒绝(CORS)或资源不存在时有友好反馈。
- ⚠️ 注意 CORS 限制:QuickChart 默认允许跨域请求(Access-Control-Allow-Origin: *),但若更换为其他未配置 CORS 的图床,需改用 PHP 代理(如 file_get_contents($url) + header('Content-Disposition: attachment'))绕过限制。
该方案轻量、零依赖、兼容所有现代浏览器(Chrome 64+、Firefox 60+、Edge 79+、Safari 15.4+),是实现“URL 图片一键下载”的推荐标准做法。
立即学习“Java免费学习笔记(深入)”;










