XLSX预览Excel

<input type="file" id="fileInput" accept=".xlsx, .xls">
<table id="previewTable" border="1">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

import XLSX from 'xlsx';

// 用于处理文件选择事件
function handleFile(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
        const data = e.target.result;
        // 将文件数据转换为 workbook 对象
        const workbook = XLSX.read(data, { type: 'binary' });

        // 从 workbook 中获取第一个工作表的名字
        const sheetName = workbook.SheetNames[0];

        // 获取工作表的数据
        const worksheet = workbook.Sheets[sheetName];
        const data = XLSX.utils.sheet_to_json(worksheet, {header: 1, raw: true});

        // 显示数据
        displayData(data);
    };
    reader.readAsBinaryString(file);
}

// 显示数据到页面
function displayData(data) {
    const table = document.getElementById('previewTable');
    table.innerHTML = '';

    data.forEach(row => {
        const tr = document.createElement('tr');

        Object.values(row).forEach(value => {
            const td = document.createElement('td');
            td.textContent = value;
            tr.appendChild(td);
        });

        table.appendChild(tr);
    });
}

// 绑定文件选择器的事件
document.getElementById('fileInput').addEventListener('change', handleFile);