如何使用FileSystemDirectoryHandle将文件保存至已打开目录？

完全可以将文件保存到已打开的FileSystemDirectoryHandle目录中，核心是通过目录句柄创建/获取文件句柄，再执行写入操作，具体步骤如下：

1. 获取已打开的目录句柄 #

你可以通过目录选择弹窗获取，或者调用之前持久化存储的目录句柄（比如存在IndexedDB中的）：

// 弹出目录选择框，获取用户授权的目录句柄
const dirHandle = await window.showDirectoryPicker();

2. 创建或获取目标文件句柄 #

调用目录句柄的getFileHandle()方法，指定文件名并设置create: true（文件不存在时自动创建）：

// 在目标目录下创建或获取test.txt的文件句柄
const fileHandle = await dirHandle.getFileHandle('test.txt', { create: true });

3. 写入文件内容 #

通过文件句柄创建可写流，写入内容后关闭流完成保存：

try {
  // 创建可写流
  const writableStream = await fileHandle.createWritable();
  // 写入文本内容（也支持ArrayBuffer等二进制数据）
  await writableStream.write('需要保存的文件内容');
  // 关闭流，完成写入
  await writableStream.close();
} catch (err) {
  // 捕获用户取消操作、权限不足等异常
  console.error('写入文件失败:', err);
}

注意事项 #

• 权限要求：浏览器会弹窗请求用户授权访问目录，单次会话有效；若需要持久保留句柄，可调用dirHandle.persist()方法
• 环境限制：该API仅支持HTTPS或localhost等安全上下文环境
• 异常处理：务必添加错误捕获，处理用户取消选择、权限拒绝、文件写入失败等场景

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