下载文件时能否实现类似DocumentPicker的自定义保存目标路径选择功能

可以实现该需求，不同运行环境的实现方式如下：

Web端实现 #

• 现代浏览器支持通过showSaveFilePicker()API实现该效果，这是File System Access API的一部分，调用后会唤起系统原生的文件保存选择框，用户可以自主选择保存路径、修改文件名，示例代码如下：

async function saveFileToCustomPath(fileContent, fileName) {
  try {
    const handle = await window.showSaveFilePicker({
      suggestedName: fileName,
      types: [{
        description: '所有文件',
        accept: {'*/*': ['.*']}
      }]
    });
    const writable = await handle.createWritable();
    await writable.write(fileContent);
    await writable.close();
  } catch (err) {
    // 用户取消选择或者权限不足时的容错处理
    console.error('保存失败:', err);
  }
}

• 如果需要兼容低版本浏览器，可以给下载的a标签添加download属性，同时引导用户在浏览器设置中开启「下载前询问每个文件的保存位置」选项，也能让用户自主选择保存路径。

移动端实现 #

• iOS端：可以使用UIDocumentPickerViewController的导出模式，指定要保存的文件后即可唤起系统文档选择器，让用户选择目标存储位置。
• Android端：通过ACTION_CREATE_DOCUMENT意图唤起系统文件选择器，用户选定路径后拿到对应的Uri写入文件内容即可。

桌面端实现 #

• Electron、QT等跨端框架都提供了原生的文件保存对话框API，直接调用即可唤起系统级的保存路径选择器，和上传用的DocumentPicker效果完全一致。

你要的实现效果参考：

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