Electron 中 HTML5 原生 API（如 FileReader、fetch、Canvas）可用，但需注意路径解析、拖拽启用及主进程桥接；禁用 nodeIntegration 时须通过 contextBridge + ipcRenderer 安全调用 Node.js 能力，打包后资源路径需用 protocol.handle 或 IPC 处理。
Electron 里 HTML5 的 File API 能用，但受限于 Node.js 环境隔离
Electron 默认禁用 Node.js 集成（nodeIntegration: false），所以直接在渲染进程里调用 fs.readFile 或 require('fs') 会报 ReferenceError: require is not defined。这不是 HTML5 本身的问题，而是 Electron 的安全策略切断了 DOM 与 Node.js 的默认通道。
实际能用的 HTML5 原生能力包括：fetch、localStorage、Canvas、Web Workers、IndexedDB，以及通过 触发的 FileReader —— 这些不依赖 Node.js，可直接运行。
- 想读本地文件？用
+FileReader，别硬写fs.readFileSync - 想访问应用目录下的资源（比如
app.asar里的配置）？必须走主进程桥接，不能靠fetch('./config.json')直接加载（路径解析会失败） - 开启
nodeIntegration: true是最简方案，但会削弱安全沙箱，不推荐用于生产环境
用 contextBridge + ipcRenderer 安全暴露桌面能力
Electron 12+ 强制推荐使用预加载脚本（preload.js）配合 contextBridge 向渲染进程注入受控 API。这是目前最稳妥的 HTML5 与桌面功能集成方式。
例如：让网页点击按钮后选择并读取一个 JSON 文件：
立即学习“前端免费学习笔记（深入）”；
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
openFile: () => ipcRenderer.invoke('dialog:openFile'),
readFile: (path) => ipcRenderer.invoke('fs:readFile', path)
})
然后在 HTML5 页面中直接调用：
