iOS端自动下载文件直接打开新标签页，需改为弹出下载确认弹窗

针对你遇到的iOS端下载文件直接在新标签页打开、无确认弹窗的问题，核心原因是iOS Safari对非用户主动触发的下载行为、download属性以及Blob URL的处理有特殊限制，以下是具体的解决方案：

1. 确保下载触发来自用户主动交互 #

iOS Safari会拦截非用户直接触发的下载操作（比如页面加载时自动执行下载），必须把下载逻辑绑定到用户明确的操作上（比如按钮点击、触摸事件）：

// 示例：绑定到按钮点击
document.getElementById('downloadBtn').addEventListener('click', async () => {
  await downloadFile('your-file-url');
});

2. 明确指定Blob的MIME类型 #

iOS Safari对未指定明确MIME类型的Blob可能会识别为可预览文件，进而直接打开而非下载。修改代码中Blob的创建逻辑，根据文件类型设置对应MIME：

// 替换原有的const blob = await response.blob();
const blob = await response.blob();
// 比如如果是文本文件，强制指定MIME类型
const typedBlob = new Blob([blob], { type: 'text/plain' });
const downloadUrl = window.URL.createObjectURL(typedBlob);

如果是其他文件类型，替换对应的MIME（比如application/pdf、image/png等）。

3. 延迟回收Blob URL #

iOS Safari可能在下载完成前就回收了Blob URL，导致文件无法触发下载弹窗。调整revokeObjectURL的执行时机，通过监听事件确保下载完成：

// 修改原有的link.click()后的逻辑
link.addEventListener('load', () => {
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
  resolve();
});

link.addEventListener('error', () => {
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
  reject(new Error('下载失败'));
});

link.click();

4. 补充rel="noopener noreferrer"属性 #

给创建的a标签添加该属性，避免iOS Safari的安全限制导致的异常行为：

const link = document.createElement('a');
link.href = downloadUrl;
link.download = filename;
link.rel = 'noopener noreferrer'; // 添加这一行
document.body.appendChild(link);

修改后的完整代码示例 #

export function downloadFile(
  url: string,
  options?: RequestInit,
  filename = 'file.txt',
): Promise<void> {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch(url, options);

      if (!response.ok) {
        reject(response);
        return;
      }

      const blob = await response.blob();
      // 根据文件类型指定MIME，这里以文本文件为例
      const typedBlob = new Blob([blob], { type: 'text/plain' });
      const downloadUrl = window.URL.createObjectURL(typedBlob);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.rel = 'noopener noreferrer';

      const contentDisposition = response.headers.get('content-disposition');
      const fileNameMatch = contentDisposition?.match(/filename="?(.+)"?/i);

      if (fileNameMatch?.length === 2) {
        filename = fileNameMatch[1];
      }

      link.download = filename;
      document.body.appendChild(link);
      
      // 监听事件确保下载完成后再回收资源
      link.addEventListener('load', () => {
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        resolve();
      });
      
      link.addEventListener('error', (err) => {
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl);
        reject(err);
      });

      link.click();
    } catch (error) {
      reject(error);
    }
  });
}

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