如何在JavaScript中点击按钮下载服务器返回的PNG二维码？

这里给你两种实用的实现方案，都是前端直接处理字节数据完成下载：

方案一：处理已获取的字节数据 #

如果已经拿到了API返回的字节数据（比如ArrayBuffer或者Uint8Array），可以通过Blob对象生成下载链接，再触发下载：

// 假设你已经从API拿到了字节数据，比如response.data是Uint8Array或ArrayBuffer
function downloadQrCode(byteData) {
  // 创建Blob对象，指定MIME类型为image/png
  const blob = new Blob([byteData], { type: 'image/png' });
  // 创建临时下载链接
  const url = URL.createObjectURL(blob);
  // 创建a标签
  const a = document.createElement('a');
  a.href = url;
  // 设置下载文件名
  a.download = 'qrcode.png';
  // 触发点击
  a.click();
  // 释放URL对象，避免内存泄漏
  URL.revokeObjectURL(url);
}

// 给按钮绑定点击事件
document.getElementById('downloadBtn').addEventListener('click', () => {
  // 这里替换成你获取字节数据的逻辑，比如调用API拿到byteData后执行downloadQrCode
  downloadQrCode(yourByteData);
});

方案二：直接在请求阶段处理下载 #

如果还没发起API请求，可以直接在请求时设置responseType为blob，省去手动转换的步骤：

document.getElementById('downloadBtn').addEventListener('click', async () => {
  try {
    const response = await fetch('/your-api-url', {
      method: 'GET', // 或POST，根据你的API要求
      // 其他请求头配置
    });
    if (!response.ok) throw new Error('请求失败');
    // 直接获取Blob对象
    const blob = await response.blob();
    // 后续步骤和方案一一致
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'qrcode.png';
    a.click();
    URL.revokeObjectURL(url);
  } catch (err) {
    console.error('下载失败:', err);
  }
});

注意事项 #

• 确保API返回的确实是PNG格式的字节流，MIME类型设置正确
• download属性可以自定义文件名，浏览器会优先使用这个名称保存
• 一定要调用URL.revokeObjectURL()释放资源，防止内存占用过高

内容的提问来源于stack exchange，提问作者Maryam Alishahi