File System Access API文件写入报错求助

第一个报错：[Violation] Avoid using document.write() #

原因是你定义的函数名write和浏览器原生的document.write重名，触发了浏览器的检测逻辑。直接把函数名改成不冲突的名称即可，比如writeToFile，同时同步更新HTML按钮的点击事件绑定。

第二个报错：Uncaught (in promise) TypeError: filehandle.createWritable is not a function #

这个报错有两个核心问题，逐一修正：

• window.showOpenFilePicker()返回的是Promise对象，必须用await等待它执行完成，且它返回的是文件句柄数组，需要取第一个元素才能拿到单个文件的操作句柄。
• 调用showOpenFilePicker时默认是只读权限，必须显式指定mode: 'readwrite'，否则文件句柄不会提供createWritable方法。

修正后的完整代码 #

JS:

async function writeToFile() {
  // 等待文件选择器返回结果，指定读写权限
  const [fileHandle] = await window.showOpenFilePicker({
    mode: 'readwrite'
  });
  // 创建可写入流
  const writable = await fileHandle.createWritable();
  // 写入内容
  await writable.write('The file has been updated');
  // 关闭流
  await writable.close();
}

HTML:

<button onclick="writeToFile();">Write File</button>

额外注意事项 #

• File System Access API仅支持安全上下文（HTTPS协议或localhost环境），普通HTTP环境下API会直接不可用。
• 必须由用户手动选择目标文件，API不允许自动访问本地文件，这是浏览器的强制安全限制。

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