本文介绍如何使用纯 javascript（无需后端）实现点击按钮即下载远程 url 的二维码图片，核心是利用 `fetch` 获取图像 blob 并通过动态 `` 标签触发浏览器原生下载。
在 Web 开发中，常需将动态生成的二维码（如来自 QuickChart、QRCode Monkey 等服务）直接提供给用户下载。由于该二维码以图片形式托管在第三方 URL 上（例如 https://quickchart.io/qr?...），我们无需 PHP 服务端中转——现代浏览器完全支持通过前端 JavaScript 完成「获取 → 转换 → 下载」全流程。
以下是完整、健壮的一键下载实现：
<button id="downloadQrBtn">? 下载二维码</button>
<script>
document.getElementById('downloadQrBtn').addEventListener('click', async () => {
const qrUrl = 'https://quickchart.io/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500¢erImageSizeRatio=0.4¢erImageUrl=https://app.tapo.app/Logo-Big.png';
try {
const response = await fetch(qrUrl);
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const blob = await response.blob();
const contentType = response.headers.get('content-type') || 'image/png';
const extension = contentType.split('/')[1].toLowerCase().replace('jpeg', 'jpg');
const filename = `qrcode.${extension}`;
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename; // 自动推断扩展名，提升兼容性
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (err) {
console.error('二维码下载失败：', err);
alert('下载失败，请检查网络或链接有效性');
}
});
</script>✅ 关键说明与最佳实践：
- ✅ 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免费学习笔记（深入）”；
