JavaScript拖拽读取Excel需用FileReader读ArrayBuffer，再通过SheetJS解析为JSON；不可用readAsText，因.xlsx是ZIP压缩包，非纯文本。
拖拽Excel文件后怎么用JavaScript读取表格内容
浏览器原生不支持直接解析Excel二进制格式（.xlsx 或 .xls），必须借助第三方库。核心路径是：监听拖拽事件 → 用 FileReader 读取文件为 ArrayBuffer → 交给 xlsx（SheetJS）解析 → 提取 sheet_to_json 数据。
为什么不能直接用 FileReader.readAsText() 读 Excel
因为 .xlsx 是 ZIP 压缩包格式，内部含 XML 和二进制流，不是纯文本。用 readAsText() 会得到乱码或解析失败；错误现象包括：TypeError: Cannot read property '0' of undefined、空数组、或控制台报 Invalid array length。
- 必须用
readAsArrayBuffer()获取原始字节 -
xlsx.read()的type参数必须设为'array'或'binary'（不能是'text'） - 若文件是
.xls（旧版），同样适用，但兼容性略低，建议优先测试.xlsx
最小可行代码：监听拖拽 + 解析首表
以下代码可直接粘贴进 HTML 的 <script></script> 中运行，已避开常见坑：
<div id="drop-area">拖 Excel 文件到这里</div>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script><script>
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (!file || !file.name.endsWith('.xlsx') && !file.name.endsWith('.xls')) return;
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result); // 关键：转成 Uint8Array
const workbook = XLSX.read(data, { type: 'array' }); // type 必须是 'array'
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 }); // header:1 返回二维数组
console.log(jsonData);
};
reader.readAsArrayBuffer(file); // 注意：不是 readAsText
});
dropArea.addEventListener('dragover', e => e.preventDefault());
</script>
常见报错和对应修复
遇到解析失败，先检查这几项：
-
ReferenceError: XLSX is not defined→ 确保<script src="..."></script>加载成功，且在使用前执行 - 解析结果为空数组 → 检查 Excel 是否有隐藏工作表、是否保护了工作表、或首行全是空值（
sheet_to_json默认跳过空行） - 中文乱码（尤其旧版 .xls）→ 改用
{ type: 'binary', codepage: 65001 }（UTF-8），但需注意codepage仅对部分格式生效，.xlsx通常不需要 - 大文件卡死（>10MB）→
readAsArrayBuffer会全量加载进内存，没做分块或流式处理，生产环境需加 loading 提示和大小限制
真正难的不是读取，而是 Excel 格式本身：合并单元格、多表头、公式、样式——这些都会让 sheet_to_json 输出结构不可预测。如果业务强依赖格式还原，别只盯着“读出来”，得提前约定 Excel 模板规范。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
