ASP.NET WebForm：无需FileUpload控件读取Excel文件

实现思路 #

• 用隐藏的input type="file"触发文件选择对话框，界面仅展示自定义按钮
• 借助SheetJS（xlsx）库解析Excel文件内容
• 将解析后的JSON数据动态渲染到页面表格中

完整代码示例 #

HTML结构 #

<!-- 自定义操作按钮 -->
<button id="selectExcelBtn">选择Excel文件并加载数据</button>

<!-- 隐藏的文件选择控件，不显示在界面 -->
<input type="file" id="excelFileInput" accept=".xlsx,.xls" style="display: none;">

<!-- 数据展示表格 -->
<table id="dataTable" border="1" cellpadding="8" cellspacing="0" style="margin-top: 20px; display: none;">
    <thead id="tableHeader"></thead>
    <tbody id="tableBody"></tbody>
</table>

JavaScript逻辑（需引入SheetJS库） #

// 获取DOM元素
const selectBtn = document.getElementById('selectExcelBtn');
const fileInput = document.getElementById('excelFileInput');
const dataTable = document.getElementById('dataTable');
const tableHeader = document.getElementById('tableHeader');
const tableBody = document.getElementById('tableBody');

// 按钮点击触发隐藏的文件选择框
selectBtn.addEventListener('click', () => {
    fileInput.click();
});

// 文件选择完成后解析并渲染数据
fileInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 读取文件二进制内容
    const reader = new FileReader();
    reader.onload = function(e) {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 默认读取第一个工作表数据
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet);

        // 渲染表格
        renderTable(jsonData);
    };
    reader.readAsArrayBuffer(file);
});

// 表格渲染函数
function renderTable(data) {
    if (data.length === 0) {
        alert('Excel文件中无有效数据');
        return;
    }

    // 清空历史内容
    tableHeader.innerHTML = '';
    tableBody.innerHTML = '';

    // 生成表头
    const headers = Object.keys(data[0]);
    const headerRow = document.createElement('tr');
    headers.forEach(header => {
        const th = document.createElement('th');
        th.textContent = header;
        headerRow.appendChild(th);
    });
    tableHeader.appendChild(headerRow);

    // 生成数据行
    data.forEach(rowData => {
        const row = document.createElement('tr');
        headers.forEach(header => {
            const td = document.createElement('td');
            td.textContent = rowData[header] || '';
            row.appendChild(td);
        });
        tableBody.appendChild(row);
    });

    // 显示表格
    dataTable.style.display = 'table';
}

补充说明 #

• 引入SheetJS库：可在页面头部添加CDN链接 <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>，或下载本地文件引入
• accept=".xlsx,.xls" 用于限制仅能选择Excel格式文件
• 代码默认读取第一个工作表数据，若需处理多工作表可修改SheetNames遍历逻辑
• 表格样式可根据需求自定义调整

内容的提问来源于stack exchange，提问作者user2231301