React应用带Bearer鉴权头实现原生体验大文件下载的方案问询

以下是两种可落地的实现方案，完全匹配你的需求：

方案一：后端配合生成临时授权链接（兼容性、体验最优 #

这是行业内大文件下载的标准实现，完全满足你提出的所有要求：

• 前端点击下载按钮后，先携带Bearer令牌调用后端的「临时下载凭证申请接口」，后端校验权限后返回一个有效期极短（通常1-5分钟）、单次有效的下载链接，授权凭证可以放在url参数或者临时cookie中
• 前端直接创建<a>标签，href指向该临时下载链接，添加download属性后触发点击即可
• 完全复用原生浏览器下载逻辑，点击后立即弹出下载确认弹窗、下载进度在浏览器下载列表正常展示、文件直接流式写入磁盘不占内存，兼容所有主流浏览器
• 安全层面只要做好临时凭证的过期、单次使用限制，不会存在授权泄露风险

方案二：前端独立实现（仅需前端修改，兼容90%+主流用户） #

如果后端暂时无法配合调整，可以用showSaveFilePicker API 配合流式读取实现，代码示例如下：

const downloadFile = async () => {
  try {
    // 调起系统原生保存文件弹窗
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: '指定的文件名.后缀',
    });
    const writableStream = await fileHandle.createWritable();

    // 发起带授权头的下载请求
    const response = await fetch('你的文件下载接口地址', {
      headers: {
        Authorization: `Bearer ${你的授权令牌}`,
      },
    });

    // 直接将响应流写入本地文件，全程不占用浏览器内存，支持任意大小的文件
    await response.body.pipeTo(writableStream);
  } catch (error) {
    // 处理用户取消下载、网络错误等异常
    console.log('下载异常：', error);
  }
}

该方案Chrome 86+、Edge 86+、Safari 15.2+均支持，覆盖绝大多数主流用户，剩余低版本浏览器可以降级使用你原有的Blob方案做兼容即可。

补充说明 #

你提到的直接用fetch获取response.body后触发原生下载弹窗的思路，受浏览器安全策略限制，前端无法直接获取用户本地文件保存路径，系统原生下载弹窗必须由浏览器主动触发，没有其他第三方方案可以完全模拟原生<a>标签的下载行为。

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