17370845950

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

在 Web 开发中，经常需要将动态生成的二维码（例如通过 QuickChart.io 等服务）直接提供给用户下载。由于该二维码是通过 URL 动态渲染的 PNG 图像（如 https://www.php.cn/link/4fd76758ca20a054063d174c3cd7f394/qr?text=...），我们无法直接用 链接触发下载——因为跨域资源或服务端未设置 Content-Disposition: attachment 时，浏览器会拒绝强制下载。

✅ 推荐方案：使用 fetch + Blob + 动态 标签
这是现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2025）广泛支持的标准方式，安全、简洁、无需 PHP 后端中转：

? 下载二维码

? 关键说明：

• ✅ 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 最佳实践。