Blazor如何调用navigator API访问源私有文件系统存储站点文件？

代码无法直接运行的核心原因 #

• 接口调用依赖安全上下文：非HTTPS生产环境、非本地调试域下，浏览器会直接禁用navigator.storage.getDirectory接口
• await语法依赖异步上下文：普通脚本无type="module"标识时，顶层await会直接报语法错误
• 部分老旧浏览器未实现该API，未做兼容判断时会直接抛错

可直接运行的适配代码 #

// 源私有文件系统(OPFS)初始化逻辑
async function initOriginPrivateFS() {
  // 运行环境校验
  if (!window.isSecureContext) {
    throw new Error('请在HTTPS环境或本地localhost调试环境运行代码');
  }
  if (!('getDirectory' in navigator.storage)) {
    throw new Error('当前浏览器版本不支持源私有文件系统API');
  }
  // 原示例逻辑
  const root = await navigator.storage.getDirectory();
  const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });

  // 扩展：真实文件写入示例
  const writableStream = await fileHandle.createWritable();
  await writableStream.write('Blazor站点生成的文件内容');
  await writableStream.close();

  return { rootDirHandle: root, targetFileHandle: fileHandle };
}

// 执行初始化
initOriginPrivateFS()
  .then(res => console.log('文件系统访问成功', res))
  .catch(err => console.error('访问失败：', err.message));

如果是用type="module"加载的脚本，可以直接用顶层await，不需要包异步函数：

<script type="module">
const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });
</script>

Blazor场景落地说明 #

• 你选用的源私有文件系统（OPFS）完全匹配需求：
  • 无需任何用户交互授权，页面加载后即可直接访问
  • 存储内容为真实二进制文件，不是localStorage类的键值对缓存，支持大文件流式读写
  • 目录为域级隔离，普通用户无法通过系统文件管理器直接访问，不会被误操作修改，具备基础防护性
• Blazor对接方式：将上述JS逻辑注册为JS互操作方法，在组件OnAfterRenderAsync生命周期调用即可，拿到文件句柄后可直接和Blazor端的文件流做互传，实现生成文件的持久化存储
• 兼容范围：Chrome 86+、Edge 86+、Firefox 111+、Safari 15.2+ 均完整支持该特性，覆盖95%以上的现役浏览器版本，无需额外引入兼容依赖

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