本文详解 vue/原生 js 中通过按钮点击调用 api 获取二进制数据、转为 base64 url 并触发下载的正确实现方式，重点解决因复用 `` 元素导致的无限递归调用问题。
在前端开发中，常需通过按钮触发后端文件流（如图片、PDF）的下载。一个常见但易出错的做法是：将 标签内嵌于
根本原因在于：你复用了 DOM 中已绑定事件的 元素作为下载载体。正确的做法是——每次下载都动态创建一个全新的、无事件绑定的 元素，仅用于触发浏览器原生下载行为，用完即弃。
以下是修复后的完整实现（兼容 Vue 2/3 及纯 JS 环境）：
getImage: async function(info, event) {
try {
const response = await fetch(`endpoint/${info[0]}/${info[1]}`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const result = await response.json();
const imageBuffer = new Uint8Array(result.image_buffer.data);
// ✅ 安全转换 ArrayBuffer → Base64（推荐使用现代 API）
const blob = new Blob([imageBuffer], { type: 'image/jpeg' });
const url = URL.createObjectURL(blob);
// ✅ 创建全新 <a> 元素（不挂载到 DOM，不绑定任何事件）
const a = document.createElement('a');
a.href = url;
a.download = `${info[1] || 'image'}.jpg`;
// 触发下载
document.body.appendChild(a); // 部分浏览器要求元素在 DOM 中
a.click();
// ✅ 清理：释放内存 + 移除临时元素
URL.revokeObjectURL(url);
document.body.removeChild(a);
} catch (err) {
console.error('Download failed:', err);
alert('文件下载失败，请重试');
}
}⚠️ 关键注意事项：
- 禁止复用页面中已存在的 或 ：它们可能携带事件监听器，引发递归。
- 优先使用 Blob + URL.createObjectURL() 而非 btoa()：btoa() 对非 ASCII 字符（如大于 0xFF 的字节）会报错；Uint8Array → Blob 方式更健壮、支持任意二进制数据。
- 务必调用 URL.revokeObjectURL()：防止内存泄漏，尤其在高频下载场景下。
-
Vue 模板中应直接绑定按钮事件，无需嵌套 ：
<!-- ✅ 正确：按钮独立，逻辑由方法控制 --> <button @click="getImage([imageID, imageName])">View scoresheet</button>
总结：下载逻辑的本质是「一次性行为」，应通过临时 DOM 元素隔离副作用。掌握 Blob、URL.createObjectURL() 和动态元素创建，即可安全、高效地实现服务端二进制流的前端下载，彻底规避无限循环陷阱。
