本文详解 vue/原生 js 中通过按钮点击调用 api 获取二进制数据、转为 base64 url 并触发下载的正确实现方式，重点解决因复用 `` 元素导致的无限递归调用问题。
在前端开发中，常需通过按钮触发后端文件流（如图片、PDF）的下载。一个常见但易出错的做法是：将 <a> 标签内嵌于 <button> 中，并在点击事件中修改该 <a> 的 href 与 download 属性后调用 .click()。这会导致无限循环——因为 event.target 指向的是 <a> 元素本身，其 click() 会再次触发绑定在父级 <button> 上的 v-on:click（或原生 onclick），从而反复调用 getImage()。
根本原因在于：你复用了 DOM 中已绑定事件的 <a> 元素作为下载载体。正确的做法是——每次下载都动态创建一个全新的、无事件绑定的 <a> 元素，仅用于触发浏览器原生下载行为，用完即弃。
以下是修复后的完整实现（兼容 Vue 2/3 及纯 JS 环境）：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
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('文件下载失败，请重试');
}
}⚠️ 关键注意事项：
- 禁止复用页面中已存在的 <a> 或 <button> 元素：它们可能携带事件监听器，引发递归。
- 优先使用 Blob + URL.createObjectURL() 而非 btoa()：btoa() 对非 ASCII 字符（如大于 0xFF 的字节）会报错；Uint8Array → Blob 方式更健壮、支持任意二进制数据。
- 务必调用 URL.revokeObjectURL()：防止内存泄漏，尤其在高频下载场景下。
-
Vue 模板中应直接绑定按钮事件，无需嵌套 <a>：
<!-- ✅ 正确：按钮独立，逻辑由方法控制 --> <button @click="getImage([imageID, imageName])">View scoresheet</button>
总结：下载逻辑的本质是「一次性行为」，应通过临时 DOM 元素隔离副作用。掌握 Blob、URL.createObjectURL() 和动态元素创建，即可安全、高效地实现服务端二进制流的前端下载，彻底规避无限循环陷阱。
