如何通过前端 JavaScript 实现一键下载远程 QR 码图片

花韻仙語 2026-01-07 00:00:00 次阅读

本文介绍如何使用纯 javascript（无需后端）直接从 url 下载动态生成的 qr 码图片，适用于 quickchart.io 等在线二维码服务，核心是利用 `fetch` + `blob` + 模拟点击 `quickchart.io 动态生成的 png 图片）提供给用户一键下载。由于该 url 直接返回图像二进制数据（content-type: image/png），我们完全可以通过浏览器原生 api 在前端完成下载，无需 php 或任何服务端中转——既轻量又安全。

✅ 推荐实现（现代浏览器兼容）

以下是一段简洁、健壮的 JavaScript 实现，支持错误处理与资源清理：

async function downloadQRImage() {
  const url = 'https://www./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(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = 'tapo-qr-code.png'; // 自定义文件名（扩展名建议与实际类型一致）
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl); // 及时释放内存引用
  } catch (err) {
    console.error('下载失败：', err);
    alert('二维码下载失败，请检查网络或重试。');
  }
}

? HTML 触发示例：

⚠️ 注意事项

CORS 限制：QuickChart.io 默认允许跨域请求（响应头含 Access-Control-Allow-Origin: *），因此可直连。若换用其他不支持 CORS 的图片服务，则需后端代理（PHP/Node.js 等）中转。
URL 编码修正：原始问题中的 URL 含 ¢erImageSizeRatio（应为 centerImageSizeRatio）等乱码参数，已手动修正为正确拼写（& 而非 &，且无 ¢ 字符）。请确保传入 fetch() 的 URL 是合法、可访问的。
兼容性：fetch 和 Blob 在现代浏览器（Chrome 42+, Firefox 39+, Edge 14+, Safari 10.1+）中均支持；如需支持 IE，需引入 fetch polyfill 并改用 XMLHttpRequest。
文件名建议：a.download 值应包含 .png 扩展名，避免部分浏览器默认保存为 unknown 类型。