File System Access API：文件打开与保存

---

title: File System Access API：文件打开与保存

keywords:

• showOpenFilePicker
• showSaveFilePicker
• FileSystemFileHandle
• createWritable
• 权限

description: 使用 File System Access API 在浏览器中打开与保存本地文件，覆盖权限提示、可写流与错误处理，并提供降级策略。

categories:

• 应用软件
• 办公软件

---

概述

File System Access API 在安全上下文中允许用户选择本地文件并进行读写。通过文件句柄获取可写流进行保存，同时需处理权限与错误。

用法/示例

// 打开文件
const [handle] = await window.showOpenFilePicker({ types: [{ description: 'Text', accept: { 'text/plain': ['.txt'] } }] })
const file = await handle.getFile()
const text = await file.text()

// 保存文件
const saveHandle = await window.showSaveFilePicker({ suggestedName: 'output.txt' })
const writable = await saveHandle.createWritable()
await writable.write('Hello')
await writable.close()

工程建议

• 明确文件类型与大小边界，避免过度占用存储与内存；对二进制使用流式读写。
• 清晰的错误与权限提示，确保用户知情与可控；处理取消与并发写入。
• 在不支持环境提供下载上传的替代流程。

参考与验证

• MDN：File System Access — https://developer.mozilla.org/docs/Web/API/File_System_Access_API
• web.dev：File System Access — https://web.dev/articles/file-system-access