远程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+）：

? 下载 QR 码

? 注意 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 脚本代理下载（需服务器支持）：

前端调用：

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

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

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

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