浏览器出于安全限制，无法直接访问本地文件系统，因此不能通过文件路径（如 `"data.xlsx"`）自动加载 excel 文件；唯一合规的方式是用户主动选择文件，例如使用 `` 触发文件读取。
在 Web 前端中实现 Excel 数据解析并渲染为 HTML 表格，是一个常见需求。但必须明确一个核心原则：现代浏览器禁止 JavaScript 未经用户授权直接读取本地文件路径（如 readXlsxFile("data.xlsx")），这是由同源策略和沙箱安全模型严格保障的——否则恶意网站将能随意扫描、窃取用户硬盘中的敏感文档。
✅ 正确做法：依赖用户显式交互触发文件选择
使用标准 <input type="file" accept=".xlsx, .xls"> 元素，配合 read-excel-file 库（推荐使用其最新版 read-excel-file 或更活跃维护的 xlsx）完成解析：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/read-excel-file@6.1.0/bundle/read-excel-file.min.js"></script>
</head>
<body>
<input type="file" id="excelFile" accept=".xlsx, .xls" />
<table id="dataTable"></table>
<script>
document.getElementById('excelFile').addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
try {
const rows = await readXlsxFile(file); // 传入 File 对象，非文件路径
renderTable(rows);
} catch (err) {
console.error('Excel 解析失败:', err.message);
}
});
function renderTable(data) {
const table = document.getElementById('dataTable');
table.innerHTML = '';
data.forEach(row => {
const tr = table.insertRow();
row.forEach(cell => {
const td = tr.insertCell();
td.textContent = cell ?? '';
});
});
}
</script>
</body>
</html>⚠️ 注意事项：
- ❌ 不要尝试通过相对路径（如 "./data.xlsx"）、fetch("/data.xlsx") 或 XMLHttpRequest 直接读取本地文件——这仅在本地双击 HTML 文件（file:// 协议）时可能因 CORS 被拒，且部署到 HTTP(S) 服务器后必然失败；
- ✅ 若需“免交互”加载预置数据，应将 Excel 内容预先转换为 JSON/CSV，并作为静态资源托管在服务器上，再用 fetch('/data.json') 加载；
- ? read-excel-file 库内部使用 FileReader API，完全运行于客户端，不上传文件至服务器，保障数据隐私。
总结：安全与体验的平衡点在于「用户授权即入口」。每一次 Excel 导入都应始于一次明确的 <input type="file"> 操作——这不是技术缺陷，而是 Web 平台对用户主权的尊重。
