本文介绍如何使用纯 javascript（无需后端）直接从指定 url 下载二维码图片，利用 fetch 获取图像 blob 并触发浏览器原生下载，兼容现代浏览器且无需服务器中转。
在实际开发中，我们常需将动态生成的二维码（如来自 QuickChart、QRCode.js 等服务）提供给用户本地保存。由于该 QR 图像已托管在公开可访问的 URL 上（例如 https://quickchart.io/qr?...），完全可通过前端 JavaScript 实现一键下载，无需 PHP 或任何服务端代理——既轻量又高效。
以下是一段健壮、可直接集成的解决方案：
function downloadQRImage() {
const qrUrl = 'https://quickchart.io/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500%C2%A2erImageSizeRatio=0.4%C2%A2erImageUrl=https://app.tapo.app/Logo-Big.png';
fetch(qrUrl)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.blob();
})
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'tapo-qr-code.png'; // 自定义文件名，建议含扩展名
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放内存引用
})
.catch(err => {
console.error('下载失败：', err);
alert('二维码下载失败，请检查网络或链接有效性。');
});
}
// 绑定到按钮点击事件
document.getElementById('downloadBtn').addEventListener('click', downloadQRImage);? 使用说明与注意事项：
- ✅ 无需后端：整个流程在浏览器内完成，规避跨域限制（前提是目标 URL 支持 CORS；QuickChart 默认允许 *，可放心使用）。
- ✅ 自动识别类型：response.blob() 会保留原始响应的 MIME 类型（如 image/png），确保下载文件可被正确打开。
- ⚠️ 避免中文/特殊字符文件名：a.download 在部分浏览器中对非 ASCII 文件名支持不佳，推荐使用英文命名（如 tapo-qr-code.png）。
- ⚠️ 内存管理：务必调用 URL.revokeObjectURL(url)，防止 Blob URL 泄漏导致内存占用持续增长。
- ? 增强体验：可配合加载状态（如禁用按钮 + loading 提示）提升用户反馈；如需支持 IE，需引入 blob-polyfill 并改用 msSaveOrOpenBlob。
该方案简洁、标准、无依赖，是现代 Web 应用中下载远程图像的最佳实践之一。
立即学习“Java免费学习笔记（深入）”；
