如何使用Native File System API保存大数据及解决showSaveFilePicker安全报错

VM6785:61 DOMException: Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker

该报错是浏览器强制安全限制导致：showSaveFilePicker 属于高权限敏感接口，仅允许在用户主动交互的事件回调上下文（如点击、键盘按下事件的同步执行阶段）内调用。你触发报错的核心原因是先执行了异步的大数据Blob生成/加载逻辑，等异步逻辑完成后再调用文件选择器时，已经脱离了用户交互的有效上下文，被浏览器安全策略拦截。

方案1：调整调用时序，先唤起选择器再处理数据（推荐） #

这是完全符合规范的最优解，核心逻辑是把showSaveFilePicker的调用放在用户交互事件的同步回调里，拿到文件写入句柄后再异步处理生成大数据，不会触发安全限制，同时也适配大体积Blob的写入需求。
示例代码如下：

// 绑定到用户主动触发的点击事件
document.querySelector('#saveBtn').addEventListener('click', async () => {
  // 同步调用文件选择器，此时处于用户手势上下文，不会触发报错
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: 'export_data.dat',
    types: [{
      description: '自定义数据文件',
      accept: {
        'application/octet-stream': ['.dat']
      }
    }]
  });

  // 拿到句柄后再异步生成/加载大体积Blob，无时间限制
  const largeBlob = await yourLargeBlobGenerateLogic(); // 替换为你自己的大数据生成逻辑

  // 写入数据
  const writableStream = await fileHandle.createWritable();
  await writableStream.write(largeBlob);
  await writableStream.close();
});

如果你的数据体积超过1GB，可以改为分片写入，每次写入10-50MB的分片，降低内存占用：

// 分片写入示例
const writableStream = await fileHandle.createWritable();
const chunkSize = 20 * 1024 * 1024; // 单分片20MB
for (let i = 0; i < largeBlob.size; i += chunkSize) {
  const chunk = largeBlob.slice(i, i + chunkSize);
  await writableStream.write(chunk);
}
await writableStream.close();

方案2：利用用户手势有效期临时兼容（仅应急使用） #

浏览器对用户交互的有效上下文有短暂的保留时间（通常为5秒左右），如果你的数据处理逻辑可以在5秒内完成，可以保留原有逻辑，只要确保showSaveFilePicker在用户交互后5秒内调用即可，超出时长依然会触发报错。

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