增强版 JavaScript 读取 Excel

小小编程路2026-05-15 8:52

功能：限制只能选 Excel、解析表头、过滤空行、返回干净数组、错误提示，直接复制就能用。

html

预览

复制代码

<input type="file" id="fileInput" accept=".xlsx,.xls" />
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

<script>
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', async function (e) {
    const file = e.target.files[0];
    if (!file) return;

    // 1. 校验文件格式
    const suffix = file.name.slice(-5).toLowerCase();
    if (!suffix.includes('.xlsx') && !suffix.includes('.xls')) {
        alert('请上传 xlsx 或 xls 格式的Excel文件');
        fileInput.value = '';
        return;
    }

    // 2. 读取文件
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);

    reader.onload = function (ev) {
        try {
            // 解析Excel
            const data = new Uint8Array(ev.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            
            // 获取第一个工作表
            const firstSheet = workbook.SheetNames[0];
            const sheet = workbook.Sheets[firstSheet];

            // 3. 转JSON并自动识别表头
            let list = XLSX.utils.sheet_to_json(sheet, {
                header: 1   // 第一行作为表头
            });

            // 4. 过滤空行、空数据
            list = filterEmptyRow(list);

            console.log('解析后Excel数据：', list);
            // 在这里可以渲染表格、传给后端等
        } catch (err) {
            alert('文件解析失败，请检查Excel格式');
            console.error(err);
        }
    }

    reader.onerror = function () {
        alert('文件读取失败');
    }
});

// 过滤空行工具方法
function filterEmptyRow(arr) {
    return arr.filter(row => {
        // 去掉整行都是空的
        return row.some(item => item !== undefined && item !== '');
    });
}
</script>

增强功能亮点

限制只能上传 .xlsx/.xls，拦截其他文件
异常捕获，解析失败有弹窗提示
自动以第一行为表头解析
自动过滤空白行、无效空数据
兼容所有现代浏览器，无需后端

拿到的数据格式示例

复制代码

[
  ["姓名","年龄","性别"],
  ["张三",20,"男"],
  ["李四",22,"女"]
]