blazor js interop 读写文件必须通过浏览器原生api，c#无法直接访问本地文件系统；读取需用input[type="file"]+filereader，保存优先showsavefilepicker并降级a[download]，且所有操作须由用户手势触发。
Blazor JS Interop 读写文件必须用浏览器原生 API，C# 层不能直接访问用户文件系统
Blazor WebAssembly 或 Server 都运行在沙箱环境里，System.IO 对用户本地文件系统完全不可见。所谓“读写文件”，本质是通过 FileReader、<input type="file">、showSaveFilePicker() 等浏览器 API 中转——JS 是唯一入口，C# 只能发请求、收结果。
常见误区是试图在 C# 里拼路径、调 File.WriteAllText，这在客户端 Blazor 下必然失败（抛出 UnauthorizedAccessException 或静默无响应）。
读取文件：用 input[type="file"] + FileReader.readAsArrayBuffer
这是最兼容（支持所有现代浏览器）、最可控的方式。Blazor 不提供内置文件选择器组件，必须靠 JS 触发和解析。
- 在
wwwroot/index.html或_Host.cshtml中确保已加载 JS 函数，例如：
window.readFileAsArrayBuffer = async (elementId) => {
const input = document.getElementById(elementId);
if (!input.files || input.files.length === 0) return null;
const file = input.files[0];
const reader = new FileReader();
return new Promise((resolve) => {
reader.onload = () => resolve(new Uint8Array(reader.result));
reader.readAsArrayBuffer(file);
});
};- C# 端调用时注意：
elementId必须指向一个真实存在的<input type="file">元素（建议用@ref获取 ID 或固定 ID） - 返回的是
Uint8Array，C# 接收类型应为byte[]（Blazor 自动转换），不是string；若需文本内容，JS 侧改用readAsText并指定编码 - 不要在
OnInitialized里提前调用——此时 DOM 可能未挂载，document.getElementById返回null
保存文件：优先用 showSaveFilePicker（Chrome/Edge 86+），降级到 a[download]
showSaveFilePicker 是唯一能真正“选择保存路径 + 文件名 + 类型”的现代 API，但 Firefox 和 Safari 尚不支持。必须做运行时检测。
- JS 端封装示例（含降级）：
window.saveFile = async (fileName, contentBytes) => {
if ('showSaveFilePicker' in window) {
try {
const handle = await window.showSaveFilePicker({
suggestedName: fileName,
types: [{ description: 'Data file', accept: { 'application/octet-stream': ['.bin'] } }]
});
const writable = await handle.createWritable();
await writable.write(contentBytes);
await writable.close();
return true;
} catch (e) {
// 用户取消或不支持，降级
}
}
// 降级：创建 blob URL + a[download]
const blob = new Blob([contentBytes], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = Object.assign(document.createElement('a'), { href: url, download: fileName });
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
return true;
};- C# 调用时传入的
contentBytes必须是byte[]，Blazor 会自动转成Uint8Array - 降级方案中，
a.click()在某些 iOS Safari 版本下可能被拦截（需用户手势触发），此时只能提示“复制内容手动保存” - 不要尝试用
fs.writeFileSync或 Node.js API——Blazor WebAssembly 没有 Node 环境，Server 模式下 JSInterop 也跑在浏览器端
权限与安全限制：没有“后台持久化写入”，每次保存都是用户显式授权
浏览器禁止网页在无用户交互前提下写入文件系统。这意味着：
-
showSaveFilePicker必须由用户点击等手势触发，不能在定时器、后台任务或组件初始化时调用，否则抛DOMException: Permission denied - 读取文件同样需要用户主动点击
<input type="file">，无法预加载或扫描目录 - Blazor Server 模式下 JSInterop 仍走浏览器上下文，和 WebAssembly 的限制完全一致——别指望 SignalR 或服务端代理能绕过
- 如果需要长期存储，应转向
localStorage、IndexedDB（JS 封装后调用）或后端 API 上传
真正的难点不在代码怎么写，而在如何把浏览器这些刚性限制自然地融入 UI 流程——比如保存按钮必须禁用直到用户完成某步操作，文件读取后要立刻处理，不能缓存 File 对象等待后续调用（它会被 GC 回收且引用失效）。
