Chrome阻止程序化下载：单文件多次点击仍被拦截求解决方案

问题原因 #

Chrome的安全策略会拦截非用户直接交互同步上下文中触发的下载请求。你的代码中，下载操作是在fetch异步回调完成后执行的，此时已经脱离了用户点击按钮的同步事件上下文，因此从第二次点击开始会被浏览器判定为非用户主动触发的下载而拦截。

解决步骤 #

1. 移除target="_blank"属性 #

该属性会强制在新标签页打开下载链接，Chrome对新标签页的下载拦截规则更严格，且单个文件下载无需新标签页。

2. 避免在异步回调中触发下载 #

将下载触发逻辑放在用户点击的同步上下文里，直接使用文件的downloadUrl创建下载链接（除非你需要对文件内容做额外处理）。这样能保证下载操作始终处于用户交互的同步流程中，不会被拦截。

3. 确保链接添加到DOM后再触发点击 #

部分浏览器要求下载链接必须存在于DOM中才能生效，点击完成后再移除即可。

修改后的代码示例 #

import { type TransferredFile } from '../../features/fileTransfer/fileTransfer.type';
import { useState } from 'react';

type FileTransferDownload = {
  download: (file: TransferredFile) => Promise<void>;
  isDownloadComplete: boolean;
};

// 简化下载函数，直接使用原下载URL
const programmaticDownload = (url: string, filename: string): void => {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  // 添加到DOM确保兼容性
  document.body.appendChild(link);
  link.click();
  // 下载完成后移除链接
  document.body.removeChild(link);
};

export const useFileTransferDownload = (): FileTransferDownload => {
  const [isDownloadComplete, setDownloadComplete] = useState<boolean>(false);

  const downloadFileUnzipped = async (file: TransferredFile): Promise<void> => {
    const { name, downloadUrl } = file;
    try {
      // 直接在用户点击的同步上下文触发下载
      programmaticDownload(downloadUrl, name);
      setDownloadComplete(true);
    } catch (error) {
      console.error('Download failed:', error);
      setDownloadComplete(false);
    }
  };

  return {
    download: downloadFileUnzipped,
    isDownloadComplete,
  };
};

额外说明（针对需Blob处理的场景） #

如果你确实需要先通过fetch获取Blob（比如修改文件内容、添加水印等），可以通过以下方式保留用户交互上下文：

• 在用户点击时先创建并保留下载链接到DOM中
• 完成Blob获取后，更新链接的href为Blob URL并触发点击
• 确保整个流程处于同一个用户交互的异步任务链中

示例代码：

const downloadFileWithBlobProcessing = async (file: TransferredFile): Promise<void> => {
  const { name, downloadUrl } = file;
  try {
    // 在用户点击同步上下文创建链接
    const link = document.createElement('a');
    link.download = name;
    document.body.appendChild(link);

    // 异步获取Blob
    const response = await fetch(downloadUrl);
    const blob = await response.blob();
    
    // 更新链接href并触发点击，此时仍在用户点击的异步任务链中
    const blobUrl = window.URL.createObjectURL(blob);
    link.href = blobUrl;
    link.click();

    // 清理资源
    window.URL.revokeObjectURL(blobUrl);
    document.body.removeChild(link);
    setDownloadComplete(true);
  } catch (error) {
    console.error('Download failed:', error);
    setDownloadComplete(false);
  }
};

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