本文介绍如何使用纯 javascript 实现点击按钮即下载指定 url 的二维码图片（如 quickchart 生成的 qr 图像），无需后端介入，全程在浏览器中完成。
在 Web 开发中，经常需要将动态生成的二维码（例如通过 QuickChart.io 等服务）直接提供给用户下载。由于该二维码是通过 URL 动态渲染的 PNG 图像（如 https://www.php.cn/link/4fd76758ca20a054063d174c3cd7f394/qr?text=...），我们无法直接用 链接触发下载——因为跨域资源或服务端未设置 Content-Disposition: attachment 时，浏览器会拒绝强制下载。
✅ 推荐方案：使用 fetch + Blob + 动态 标签
这是现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020）广泛支持的标准方式，安全、简洁、无需 PHP 后端中转：
<button id="downloadBtn">? 下载二维码</button>
<script>
document.getElementById('downloadBtn').addEventListener('click', async () => {
const qrUrl = 'https://www.php.cn/link/4fd76758ca20a054063d174c3cd7f394/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 url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'tapo-qr-code.png'; // 自定义文件名（扩展名建议与 MIME 类型匹配）
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放内存引用
} catch (err) {
console.error('下载失败:', err);
alert('二维码下载失败，请检查网络或稍后重试。');
}
});
</script>? 关键说明：
- ✅ URL 编码已修正：原问题中 URL 包含错误的 ¢erImageSizeRatio（应为 centerImageSizeRatio），代码中已使用正确参数拼写；
- ✅ a.download 兼容性良好：现代浏览器均支持，但注意：若 fetch 返回的是跨域资源，需确保服务端响应头包含 Access-Control-Allow-Origin: *（QuickChart 默认支持 CORS）；
- ⚠️ 不支持 IE11：如需兼容旧版浏览器，需降级为 PHP 代理方案（服务端 file_get_contents() + header('Content-Disposition: attachment')），但本例推荐优先使用纯前端方案；
- ? 文件名建议：a.download 值应包含 .png 扩展名，便于系统识别类型；若需根据内容自动推断，可读取 blob.type（如 'image/png'）并映射扩展名。
? 进阶提示：你还可以将此逻辑封装为复用函数，支持任意图片 URL：
function downloadImage(url, filename = 'image.png') {
fetch(url).then(r => r.blob()).then(blob => {
const a = Object.assign(document.createElement('a'), {
href: URL.createObjectURL(blob),
download: filename,
});
document.body.append(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href);
});
}
// 调用：downloadImage(qrUrl, 'tapo-qr.png');综上，仅需几行 JavaScript 即可实现一键下载远程二维码图片，高效、轻量、符合现代 Web 最佳实践。
立即学习“前端免费学习笔记（深入）”；
