ERP内嵌HTML/JS网页：如何无选择器获取FileSystemDirectoryHandle

FileSystemAccess API的核心安全设计就是必须通过用户主动的交互操作（比如文件夹选择器）才能获取文件/文件夹的访问权限，这是浏览器为了防止恶意网站随意访问本地文件系统的强制限制。但针对你的内部工具场景，有两种可行的方案：

1. 首次授权后持久化复用 #

这是最通用的可行方案，适合所有支持FileSystemAccess API的浏览器：

• 首次使用时，引导用户手动选择目标共享文件夹（只需一次），通过showDirectoryPicker()获取FileSystemDirectoryHandle。
• 调用navigator.storage.persist()申请持久化存储权限，然后将获取到的FileSystemDirectoryHandle存入IndexedDB（localStorage存储大小有限，不推荐）。
• 后续用户访问时，直接从存储中读取已保存的FileSystemDirectoryHandle，无需再次弹出选择器。

示例代码片段：

// 首次授权并保存handle
async function initSharedFolder() {
  const handle = await window.showDirectoryPicker();
  // 申请持久化存储权限
  const isPersisted = await navigator.storage.persist();
  if (isPersisted) {
    // 存入IndexedDB
    const db = await openDB('FileStorage', 1, {
      upgrade(db) {
        db.createObjectStore('handles');
      },
    });
    await db.put('handles', handle, 'sharedFolder');
  }
}

// 后续获取已保存的handle
async function getSharedFolderHandle() {
  const db = await openDB('FileStorage', 1);
  return db.get('handles', 'sharedFolder');
}

2. 企业环境下通过浏览器策略强制授权 #

如果你的内部工具运行在企业管控的浏览器环境（比如Chrome、Edge），可以通过浏览器组策略绕过用户交互直接获取指定路径的文件夹句柄：

• 对于Chrome/Edge，管理员可以配置FileSystemAccessGrantedOrigins策略，将你的ERP内嵌网页的域名添加到允许列表，并指定允许访问的共享文件夹路径。
• 配置完成后，代码中可以直接指定路径获取句柄，无需用户手动选择：

// 仅在配置了企业策略的环境下生效
const sharedFolderHandle = await FileSystemDirectoryHandle.getDirectoryHandle('\\\\server\\shared-folder', { create: false });

补充：替代方案（若FileSystemAccess API受限） #

如果上述方案都无法实施，可以考虑：

• 通过FileReader读取用户选择的文件内容，将文件数据通过后端接口上传，由后端服务将文件写入共享文件夹，数据库存储共享文件夹的路径。这种方式无需客户端直接访问本地文件系统，符合浏览器安全模型。

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