HTML中File System Access的showSaveFilePicker保存文件到本地的方法-html教程-PHP中文网

showsavefilepicker 保存不了文件是因为它仅返回 filesystemfilehandle，必须调用 createwritable() 获取写入流并写入内容，且需显式 close()；漏步会导致静默失败、文件为空或截断。

html中file system access的showsavefilepicker保存文件到本地的方法

showSaveFilePicker 为什么保存不了文件？

因为 showSaveFilePicker 只负责打开保存对话框并返回一个 FileSystemFileHandle，它本身不写入内容。你必须手动调用 createWritable() 获取写入流，再把数据写进去——漏掉这步就等于点了“保存”却没真存。

常见错误现象：showSaveFilePicker 成功返回，但磁盘上没生成文件；控制台无报错，但文件大小为 0 字节。

必须用 await 等待 createWritable() 完成，否则写入会失败
写入后必须显式调用 writable.close()，否则文件可能被截断或不刷新
不能直接传字符串给 writable.write()，需转为 Uint8Array 或 Blob

如何正确用 showSaveFilePicker 保存文本内容

适用于导出 JSON、日志、配置等纯文本场景。关键在于把字符串转成 Blob 再写入，避免编码问题（比如中文乱码）。

const handle = await window.showSaveFilePicker({
  suggestedName: 'data.json',
  types: [{
    description: 'JSON files',
    accept: { 'application/json': ['.json'] }
  }]
});

const writable = await handle.createWritable();
await writable.write(new Blob(['{"name":"test"}'], { type: 'application/json' }));
await writable.close();

注意：suggestedName 是建议名，用户可修改；accept 中的 MIME 类型会影响系统过滤行为，但不是强制校验——用户仍可手动输入任意扩展名。

types 是可选的，但不设会导致对话框默认显示“所有文件”，体验差
若想支持多格式（如 .txt / .log），在 accept 对象里加多个键值对
写入大文本时，Blob 比逐字节 Uint8Array 更简洁且内存友好

保存二进制内容（如图片、PDF）的注意事项

如果要保存 ArrayBuffer、TypedArray 或 File 对象，不能直接传给 writable.write() —— 它只接受 BufferSource（如 Uint8Array）或 Blob。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

常见错误：把 File 实例直接传进去，结果报 TypeError: Failed to execute 'write' on 'FileSystemWritableFileStream'。

从 input[type="file"] 读取的 File，可用 await file.arrayBuffer() 转成 ArrayBuffer，再用 new Uint8Array(arrayBuffer) 构造写入源
若原数据已是 ArrayBuffer，直接 writable.write(new Uint8Array(buffer))
不要用 TextEncoder 处理二进制数据，它只用于字符串编码