安卓端Chrome点击带download属性a标签下载S3文件时新标签页意外关闭

方案1：修改服务端配置（最优解，无兼容问题） #

• 优先调整S3对象的响应头配置，添加Content-Disposition: attachment; filename="statement-xxx.pdf"，也可以在后端返回重定向响应时指定该头。浏览器只要收到该响应头就会直接触发下载，不需要依赖前端download属性，不存在跨域限制，全端所有浏览器都兼容。
• 如果不方便修改S3配置，可让后端接口做文件代理：由后端服务请求S3获取文件流，再将文件流返回给前端，此时请求地址和页面同源，download属性、fetch转blob下载的方案都可以正常使用，也不会出现CORS报错。

方案2：调整前端a标签配置（改造成本最低） #

安卓Chrome出现新标签页自动关闭、download失效的核心原因是：download属性仅对同源地址生效，重定向到跨域的S3地址后属性会自动失效，同时移动端Chrome对跨域PDF的新标签页打开逻辑做了特殊限制。可以做如下调整：

• 移除a标签的target="_blank"属性，直接在当前页触发跳转，避免新标签页被浏览器自动拦截关闭。
• 不需要额外添加JS逻辑，只要服务端返回的最终文件头配置正确，即可正常触发下载。

方案3：兼容兜底方案 #

如果暂时无法修改服务端配置，可以做兼容适配：

• 检测用户环境为安卓Chrome时，替换为引导提示，告知用户长按链接选择「下载链接」即可保存文件。
• 也可使用隐藏iframe触发下载，不会出现新标签页关闭的问题，示例代码如下：

function downloadFile(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
  // 下载完成后移除iframe
  setTimeout(() => document.body.removeChild(iframe), 60000);
}
// 给a标签绑定点击事件
document.querySelector('a.download-btn').addEventListener('click', (e) => {
  e.preventDefault();
  downloadFile(e.currentTarget.href);
})

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