
浏览器出于安全限制,无法直接访问本地文件系统,因此不能通过文件路径(如 `"data.xlsx"`)自动加载 excel 文件;唯一合规的方式是用户主动选择文件,例如使用 `` 触发文件读取。
在 Web 前端中实现 Excel 数据解析并渲染为 HTML 表格,是一个常见需求。但必须明确一个核心原则:现代浏览器禁止 JavaScript 未经用户授权直接读取本地文件路径(如 readXlsxFile("data.xlsx")),这是由同源策略和沙箱安全模型严格保障的——否则恶意网站将能随意扫描、窃取用户硬盘中的敏感文档。
✅ 正确做法:依赖用户显式交互触发文件选择
使用标准 元素,配合 read-excel-file 库(推荐使用其最新版 read-excel-file 或更活跃维护的 xlsx)完成解析:
⚠️ 注意事项:
- ❌ 不要尝试通过相对路径(如 "./data.xlsx")、fetch("/data.xlsx") 或 XMLHttpRequest 直接读取本地文件——这仅在本地双击 HTML 文件(file:// 协议)时可能因 CORS 被拒,且部署到 HTTP(S) 服务器后必然失败;
- ✅ 若需“免交互”加载预置数据,应将 Excel 内容预先转换为 JSON/CSV,并作为静态资源托管在服务器上,再用 fetch('/data.json') 加载;
- ? read-excel-file 库内部使用 FileReader API,完全运行于客户端,不上传文件至服务器,保障数据隐私。
总结:安全与体验的平衡点在于「用户授权即入口」。每一次 Excel 导入都应始于一次明确的 操作——这不是技术缺陷,而是 Web 平台对用户主权的尊重。










