html怎么做文件系统访问_html File System Access API文件读写【超详细】-html教程-PHP中文网

file system access api 是唯一允许网页在用户授权下读写本地文件的现代方案，需https/localhost安全上下文及用户手势触发，chrome/edge支持，firefox/safari不支持；读取用file.text()/json()，保存用showsavefilepicker()+createwritable()。

html怎么做文件系统访问_html file system access api文件读写【超详细】

浏览器不能直接访问本地文件系统，File System Access API 是目前唯一能让网页在用户明确授权下读写本地文件/目录的现代方案——但它不是“随便读”，必须由用户主动触发（比如点击按钮），且不支持后台静默访问。

为什么 `showOpenFilePicker()` 一调用就报错？

常见错误是未满足调用前提：必须在「安全上下文」（HTTPS 或 localhost）中运行，且调用必须由用户手势（如 click、keydown）发起。直接在 script 标签里执行会抛 SecurityError: Permission denied。

确保页面地址是 https:// 开头，或 http://localhost:*
把调用包在按钮的 onclick 或 addEventListener('click', ...) 里
不要在 DOMContentLoaded 或 setTimeout 中自动调用
Chrome 86+、Edge 91+ 支持；Firefox 和 Safari 当前不支持该 API

`readFile()` 返回的 `Blob` 怎么转成字符串或 JSON？

拿到 FileSystemFileHandle 后需先调用 getFile() 获取 File 对象，再用 text() 或 json() 方法读取内容。注意：这些方法返回 Promise，不能用同步方式处理。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

const fileHandle = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.text(); // UTF-8 字符串
// const data = await file.json(); // 自动 parse JSON，失败则 reject

file.text() 默认按 UTF-8 解码，若文件是 GBK 等编码，需用 arrayBuffer() + TextDecoder 手动处理
file.json() 仅适用于合法 JSON 文件，否则抛 SyntaxError
大文件（>100MB）慎用 text()，可能卡住主线程；建议分块读取或用 stream()

怎么保存文件到用户选中的位置（而非下载弹窗）？

用 showSaveFilePicker() 获取可写句柄，再通过 createWritable() 写入流。关键点是：它不会覆盖原文件，而是让用户选择路径并确认文件名，适合“另存为”场景。

const handle = await window.showSaveFilePicker({
  types: [{
    description: 'Text files',
    accept: { 'text/plain': ['.txt'] }
  }]
});
const writable = await handle.createWritable();
await writable.write(content);
await writable.close();