React+Material UI实现下载CSV文件时让用户选择保存文件夹

你当前的实现直接绑定CSV地址到Button的href属性，会遵循浏览器默认下载行为，若用户未开启浏览器的「下载前询问保存位置」开关，文件会直接存入默认下载目录，不会唤起路径选择窗口。
可以通过动态创建带download属性的a标签+Blob临时地址的方式实现，代码调整如下：

步骤1：修改下载逻辑函数 #

const downloadCsv = async () => {
  try {
    // 获取CSV文件的远程地址
    const csvRemoteUrl = await FiltroDesempenhoManager.getCsvURL();
    // 拉取CSV文件转为Blob对象
    const res = await fetch(csvRemoteUrl);
    const csvBlob = await res.blob();
    // 生成指向Blob的临时访问地址
    const tempUrl = window.URL.createObjectURL(csvBlob);
    // 动态创建a标签触发下载
    const tempLink = document.createElement('a');
    tempLink.href = tempUrl;
    // 配置默认下载文件名
    tempLink.download = '导出数据.csv';
    tempLink.click();
    // 释放临时地址，避免内存泄漏
    window.URL.revokeObjectURL(tempUrl);
  } catch (error) {
    console.error('下载失败', error);
    // 此处可补充业务侧的错误提示逻辑
  }
};

步骤2：调整Material UI按钮配置 #

移除原有href属性，将点击事件绑定为上面的downloadCsv函数即可：

<Button
  onClick={downloadCsv}
  // 其余原有属性保持不变
  ...
/>

注意事项 #

• 该方案依赖HTML5标准的download属性，兼容Chrome、Firefox、Edge、Safari 10.1+所有主流版本，覆盖绝大多数用户场景。
• 如果CSV文件地址和当前站点跨域，需要后端配置对应的CORS访问规则，否则fetch拉取资源会报错。
• 若后端接口可直接返回Blob格式的CSV数据，可省去fetch步骤，直接用返回的Blob生成临时地址，性能更优。
• 受浏览器安全策略限制，没有前端方案可以100%强制唤起路径选择窗口（如果用户手动关闭了浏览器的下载询问开关依然会直接保存到默认目录），但该方案是目前前端实现范围内唤起保存窗口概率最高的方式。

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