Android端Supabase Storage下载按钮仅首次点击生效问题

你的问题核心是部署后Android浏览器对动态创建的a标签下载行为有特殊限制，本地环境因为没有浏览器缓存/优化策略所以正常，桌面和iOS浏览器的处理逻辑不同所以不受影响。直接修改代码即可解决，具体方案如下：

修改后的代码 #

const link = document.createElement('a');
link.href = `data:application/pdf;base64,${decoded_file}`;
link.download = fileName;
link.id = `download-link-${Date.now()}`;

// 关键步骤：先把链接添加到DOM中，Android部分浏览器要求节点必须挂载才能触发下载
document.body.appendChild(link);

// 用原生事件模拟点击，比直接调用click()更可靠，避免被安全策略拦截
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});
link.dispatchEvent(clickEvent);

// 延迟移除节点，确保浏览器已经处理完下载请求再清理
setTimeout(() => {
  link.remove();
}, 100);

为什么这样改？ #

• DOM挂载要求：部署后的Android浏览器（比如Chrome）会对未挂载到DOM的动态元素做限制，直接调用click()可能被忽略，必须先把a标签添加到body里。
• 点击触发可靠性：link.click()在部分优化后的环境下可能被浏览器的安全机制拦截，用dispatchEvent模拟用户真实点击的行为更稳定。
• 延迟清理节点：立即移除节点可能导致浏览器还没完成下载请求的初始化就丢失了目标节点，100ms的延迟足够确保请求发送完成。

额外排查点 #

如果还是有问题，可以检查：

• 按钮的点击事件是否被重复绑定，导致后续点击逻辑异常
• 部署后的页面是否开启了严格的Content Security Policy（CSP），限制了data URI的下载行为

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