17370845950

本文介绍如何使用纯 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 应用中下载远程图像的最佳实践之一。