HTML与jscript如何选择文件夹并指定不存在的新文件名存储服务器数据流

原生HTML的<input type="file">控件是为读取本地文件设计的，本身不支持写入场景，所以才会要求选择已存在的文件，写文件应该用浏览器提供的下载相关API实现。
受浏览器沙箱安全策略限制，网页无法无感知直接写入本地任意路径，所有存储操作都需要用户主动交互触发，以下是两种可行的实现方案：

方案一：通用download属性方案（兼容所有现代浏览器） #

• 该方案是目前兼容性最好的实现方式，不需要额外权限，触发后会唤起系统原生的保存对话框，用户可以自由选择存储文件夹、修改任意自定义文件名，不需要文件名提前存在。
• 代码示例：

<!-- 页面触发按钮 -->
<button id="saveBtn">保存数据流</button>
<script>
// 替换为你自己的从服务器获取数据流的逻辑，返回Blob格式
async function fetchServerDatastream() {
  const response = await fetch('你的服务器接口地址');
  return response.blob();
}

document.querySelector('#saveBtn').addEventListener('click', async () => {
  // 获取服务器返回的数据流
  const dataBlob = await fetchServerDatastream();
  // 生成临时下载链接
  const tempObjectUrl = URL.createObjectURL(dataBlob);
  const downloadLink = document.createElement('a');
  downloadLink.href = tempObjectUrl;
  // 可预设默认文件名，用户可在保存弹窗中自行修改
  downloadLink.download = 'default_filename.dat';
  // 触发下载唤起保存弹窗
  downloadLink.click();
  // 释放临时资源
  URL.revokeObjectURL(tempObjectUrl);
});
</script>

方案二：FileSystem Access API 自定义文件夹方案（仅适配Chromium内核浏览器） #

• 如果你只需要适配Chrome、Edge等Chromium内核浏览器，可以用该API实现「用户先选目标文件夹，再输入自定义文件名」的流程，操作更可控。
• 代码示例：

<button id="saveBtn">选择文件夹并保存</button>
<script>
async function fetchServerDatastream() {
  const response = await fetch('你的服务器接口地址');
  return response.blob();
}

document.querySelector('#saveBtn').addEventListener('click', async () => {
  try {
    // 唤起文件夹选择器，要求用户选择已存在的目标文件夹
    const dirHandle = await window.showDirectoryPicker();
    // 这里可以用页面输入框代替prompt，获取用户自定义的新文件名
    const customFileName = prompt('请输入要保存的文件名：', 'new_file.dat');
    if (!customFileName) return;
    // 在选中的文件夹下创建新文件，create设为true时文件名不存在会自动创建
    const fileHandle = await dirHandle.getFileHandle(customFileName, { create: true });
    // 写入数据流
    const writableStream = await fileHandle.createWritable();
    const dataBlob = await fetchServerDatastream();
    await writableStream.write(dataBlob);
    await writableStream.close();
    alert('保存成功');
  } catch (error) {
    // 过滤用户主动取消选择的报错
    if (error.name !== 'AbortError') {
      console.error('保存失败：', error);
    }
  }
});
</script>

• 注意事项：
  • 该API仅支持Chrome 86+、Edge 86+、Opera 72+版本，Safari、Firefox暂未完全支持
  • 仅可在HTTPS环境或者localhost本地开发环境下使用
  • 需要用户主动授予文件夹读写权限

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