如何避免File System Access API在操作出错时生成无效保存文件

问题根因 #

调用window.showSaveFilePicker()且用户在系统弹窗中确认保存路径后，浏览器会立即在目标路径创建空白文件，该行为是API的原生设计，和后续写入逻辑是否执行无关，因此你遇到的「保存逻辑未执行仍生成空文件」的情况属于默认表现。

可用解决方案 #

方案1：调整逻辑执行顺序（优先推荐） #

把所有可能抛出错误的前置校验、数据预处理逻辑全部放在调用showSaveFilePicker之前，确认所有写入准备工作完成、没有异常后，再触发保存路径选择弹窗，从根源避免无效文件生成。
修改后示例代码：

let fileHandle;

async function save() {
  let stream = await fileHandle.createWritable();
  // 提前准备好要写入的内容，不要在这里做可能抛错的处理
  await stream.write(/* 预处理完成的内容 */);
  await stream.close();
}

async function saveFile() {
  const options = {
    types: [{
      description: 'Text File',
      accept: {
        'text/plain': '.txt'
      },
    }],
    excludeAcceptAllOption: true,
  }

  // 把所有可能抛错的逻辑移到这里先执行
  // 👇 原来抛错的逻辑提前处理，所有校验通过再弹保存框
  // doSomeThingMayThrowError()
  if (/* 校验不通过 */) {
    throw "Some error occurs, will not trigger save picker"
  }

  try {
    fileHandle = await window.showSaveFilePicker(options);
  } catch (err) {
    return;
  }

  // 到这里已经没有异常，直接执行保存
  await save();
}

方案2：异常兜底删除 #

如果业务逻辑必须先拿到文件句柄（比如需要读取用户选择的文件名、路径做后续处理），则将后续处理逻辑放在try块中，捕获到异常时主动调用remove()方法删除已创建的空文件：
示例代码：

let fileHandle;

async function save() {
  let stream = await fileHandle.createWritable();
  await stream.write(/* 待写入内容 */);
  await stream.close();
}

async function saveFile() {
  const options = {
    types: [{
      description: 'Text File',
      accept: {
        'text/plain': '.txt'
      },
    }],
    excludeAcceptAllOption: true,
  }

  try {
    fileHandle = await window.showSaveFilePicker(options);

    // 所有后续逻辑都放在try块内
    throw "Some error occurs, preventing the 'save' function from being reached...";

    await save();
  } catch (err) {
    // 捕获到异常时，如果已经获取到文件句柄，就删除无效文件
    if (fileHandle) {
      try {
        await fileHandle.remove()
      } catch (removeErr) {
        // 可选：处理删除失败的情况，比如权限不足
        console.error('删除无效文件失败', removeErr)
      }
    }
    console.error('保存失败', err)
    return;
  }
}

注：FileSystemFileHandle.remove()方法在Chrome 109、Edge 109及以上版本支持，适配低版本浏览器时可以做兼容降级提示。

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