远程QR码下载JS实现教程

哈喽！今天心血来潮给大家带来了《点击下载远程 QR 码的 JS 实现方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

本文介绍如何通过纯前端 JavaScript（无需后端）一键下载指定 URL 的 QR 码图片，利用 `fetch` + `Blob` + 动态 `QuickChart.io）直接下载为本地 PNG 文件。由于该 QR 图片由 URL 直接返回（HTTP 响应体为 image/png），我们完全可以在浏览器端完成获取、构造下载链接并触发保存——无需 PHP 或任何服务端介入。

✅ 推荐方案：纯 JavaScript 前端下载（推荐）

以下是一段简洁、健壮、可复用的代码，适用于现代浏览器（Chrome 64+、Firefox 60+、Edge 79+、Safari 15.4+）：

<button id="downloadQrBtn">? 下载 QR 码</button>

<script>
document.getElementById('downloadQrBtn').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'; // 自定义文件名（扩展名建议与实际类型一致）
    document.body.appendChild(a); // 部分浏览器要求元素在 DOM 中
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url); // 及时释放内存引用
  } catch (err) {
    console.error('下载失败：', err);
    alert('无法下载二维码，请检查网络或稍后重试。');
  }
});
</script>

? 注意 URL 编码修正：原始问题中 URL 含有错误的 ¢erImageSizeRatio（应为 centerImageSizeRatio）和 ¢erImageUrl（应为 centerImageUrl），已在此示例中修复。务必确保 URL 参数正确且已正确编码（如空格、& 等需 encodeURIComponent，但本例中参数值均安全，可直接使用）。

⚠️ 重要注意事项

• CORS 限制：fetch 下载跨域图片需目标服务器返回 Access-Control-Allow-Origin: *（或明确允许你的域名）。QuickChart.io 默认支持 CORS，因此可直接调用；若遇到 Blocked by CORS policy 错误，请确认服务端配置。
• 不支持 IE：fetch 和 Blob 在 IE 中不可用，如需兼容 IE，需引入 fetch polyfill 并改用 XMLHttpRequest + msSaveOrOpenBlob（仅限 IE10+）。
• 文件名限制：a.download 属性在部分 Safari 版本中可能被忽略，此时浏览器会默认使用 URL 中的文件名（若无，则用 unknown）。建议确保 URL 包含语义化路径（如加 ?name=xxx.png 无效，仍需靠 download 属性）。
• 内存管理：每次调用 URL.createObjectURL() 后必须配对调用 URL.revokeObjectURL()，否则可能造成内存泄漏。

✅ 替代方案（服务端中转，适用于 CORS 不友好场景）

若目标图片服务不支持 CORS，可借助轻量 PHP 脚本代理下载（需服务器支持）：

<?php
// download-qr.php
$qrUrl = $_GET['url'] ?? '';
if (!$qrUrl || !filter_var($qrUrl, FILTER_VALIDATE_URL)) {
    http_response_code(400);
    exit('Invalid URL');
}

$ext = pathinfo(parse_url($qrUrl, PHP_URL_PATH), PATHINFO_EXTENSION) ?: 'png';
header('Content-Type: image/' . $ext);
header('Content-Disposition: attachment; filename="qr-code.' . $ext . '"');
readfile($qrUrl);
?>

前端调用：

a.href = 'download-qr.php?url=' + encodeURIComponent(qrUrl);

但除非必要，优先推荐纯前端方案——更轻量、更低延迟、无服务端依赖。

综上，只需几行 JavaScript 即可优雅实现 QR 图片一键下载。保持 URL 正确、处理异常、及时释放资源，即可在绝大多数生产环境中稳定运行。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。