一键下载远程二维码图片的实现方法

你在学习文章相关的知识吗？本文《前端一键下载远程二维码图片方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

本文介绍如何使用纯 JavaScript 实现点击按钮即下载指定 URL 的二维码图片（如 QuickChart 生成的 QR 图像），无需后端介入，全程在浏览器中完成。

在 Web 开发中，经常需要将动态生成的二维码（例如通过 QuickChart.io 等服务）直接提供给用户下载。由于该二维码是通过 URL 动态渲染的 PNG 图像（如 https://quickchart.io/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://quickchart.io/qr?text=http://tapo.app&dark=000&light=fff&ecLevel=H&margin=1&size=500&centerImageSizeRatio=0.4&centerImageUrl=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 最佳实践。

理论要掌握，实操不能落！以上关于《一键下载远程二维码图片的实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！