如何用JS在网页中直接显示Excel表格？-网页设计-锦华智联科技

方案概览

方案	优点	缺点	适用场景
HTML `<table>`	最简单，无需额外库，原生支持	功能有限，无法处理复杂格式（如合并单元格、公式）	简单的数据展示，快速原型
SheetJS (xlsx)	功能强大，能读取/写入 `.xlsx`, `.xls`, `.csv` 等格式	需要引入库，纯JS渲染，样式控制较繁琐	需要用户上传/下载Excel文件，功能要求高的场景
AG Grid / Handsontable	专业级，功能极其丰富（排序、筛选、编辑、图表等）	通常是付费商业版（有免费版但有功能限制），学习曲线稍高	企业级应用，后台管理系统，需要复杂交互的数据网格
使用服务端渲染	性能好，减轻客户端负担	需要后端支持，架构更复杂	大数据量，高并发访问，对性能要求极高的场景

使用原生 HTML `<table>` 标签 (最简单)

如果你的数据已经是静态的，或者可以简单地转换成 HTML,这是最快的方法。

实现思路：

手动创建一个 HTML <table> 结构。
在 <thead> 中定义表头 (<th>)。
在 <tbody> 中填充数据行 (<tr>)。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">原生HTML表格显示Excel数据</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
            font-family: sans-serif;
        }
        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        thead th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tbody tr:nth-child(even) {
            background-color: #f9f9f9; /* 斑马纹 */
        }
        tbody tr:hover {
            background-color: #e2e2e2; /* 鼠标悬停效果 */
        }
    </style>
</head>
<body>
    <h1>销售数据报表</h1>
    <table>
        <thead>
            <tr>
                <th>月份</th>
                <th>产品A销量</th>
                <th>产品B销量</th>
                <th>总收入</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>一月</td>
                <td>150</td>
                <td>200</td>
                <td>¥35,000</td>
            </tr>
            <tr>
                <td>二月</td>
                <td>180</td>
                <td>220</td>
                <td>¥41,000</td>
            </tr>
            <tr>
                <td>三月</td>
                <td>210</td>
                <td>250</td>
                <td>¥48,000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

使用 SheetJS (xlsx) 库 (最常用)

这是目前最流行、功能最全面的客户端解决方案，它可以在浏览器中直接解析 Excel 文件（.xlsx, .xls, .csv 等）并将其渲染成 HTML 或其他格式。

实现思路：

在 HTML 中引入 SheetJS 库。
创建一个文件上传输入框 (<input type="file">)。
当用户选择文件后，使用 SheetJS 的 XLSX.read 方法读取文件内容。
将解析后的数据转换成 HTML 表格字符串。
将生成的 HTML 插入到页面中的 <div> 容器里。

示例代码：

准备工作 从 SheetJS 官网下载库，或者使用 CDN 链接，这里我们使用 CDN。

<!-- 引入 SheetJS 库 -->
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

完整的 HTML 页面代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用SheetJS显示Excel表格</title>
    <style>
        /* 样式可以和方案一类似，这里为了简洁省略 */
        #excel-table-container {
            margin-top: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>上传并预览 Excel 文件</h1>
    <!-- 文件上传输入框 -->
    <input type="file" id="file-input" accept=".xlsx, .xls" />
    <!-- 用于渲染表格的容器 -->
    <div id="excel-table-container"></div>
    <script>
        document.getElementById('file-input').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) {
                return;
            }
            const reader = new FileReader();
            reader.onload = function(event) {
                try {
                    // 1. 读取文件数据
                    const data = new Uint8Array(event.target.result);
                    // 2. 解析 Excel 文件
                    const workbook = XLSX.read(data, { type: 'array' });
                    // 3. 获取第一个工作表
                    const firstSheetName = workbook.SheetNames[0];
                    const worksheet = workbook.Sheets[firstSheetName];
                    // 4. 将工作表转换为 HTML
                    // 注意：这里会丢失很多样式，如合并单元格、颜色等
                    const html = XLSX.utils.sheet_to_html(worksheet);
                    // 5. 将生成的 HTML 插入到容器中
                    document.getElementById('excel-table-container').innerHTML = html;
                } catch (error) {
                    console.error("解析 Excel 文件时出错:", error);
                    document.getElementById('excel-table-container').innerHTML = "<p style='color: red;'>文件解析失败，请确保上传的是有效的 Excel 文件。</p>";
                }
            };
            // 以二进制方式读取文件
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

代码说明：

XLSX.read(data, { type: 'array' }): type 告诉 SheetJS 我们传入的是 ArrayBuffer。
workbook.SheetNames: 一个数组,包含了所有工作表的名称。
XLSX.utils.sheet_to_html(worksheet): 这是核心函数，它将工作表对象直接转换成完整的 HTML <table> 字符串，非常方便，但缺点是无法完美还原 Excel 的复杂格式（如合并单元格、字体颜色、背景色等）。

进阶：如何获取数据并手动渲染？ 如果你需要更好的样式控制，可以先获取 JSON 数据，然后手动用 JavaScript 生成 <table>。

// 替换 reader.onload 中的代码
reader.onload = function(event) {
    const data = new Uint8Array(event.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    // 获取 JSON 格式的数据
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // { header: 1 } 返回二维数组
    if (jsonData.length > 0) {
        let tableHTML = "<table><thead><tr>";
        // 创建表头
        jsonData[0].forEach(header => {
            tableHTML += `<th>${header}</th>`;
        });
        tableHTML += "</tr></thead><tbody>";
        // 创建数据行
        for (let i = 1; i < jsonData.length; i++) {
            tableHTML += "<tr>";
            jsonData[i].forEach(cell => {
                tableHTML += `<td>${cell}</td>`;
            });
            tableHTML += "</tr>";
        }
        tableHTML += "</tbody></table>";
        document.getElementById('excel-table-container').innerHTML = tableHTML;
    }
};

这种方式虽然代码多一点，但你可以完全控制表格的生成过程,方便添加自定义样式和逻辑。

使用专业数据网格库 (如 AG Grid)

如果你的应用需要表格的交互功能（如排序、筛选、分页、行编辑、图表集成等）,那么使用专业数据网格是最佳选择。

以 AG Grid 为例：

准备工作 引入 AG Grid 的 CSS 和 JS 文件。

<!-- 引入 AG Grid 样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/styles/ag-theme-alpine.css">
<!-- 引入 AG Grid 核心 JS -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/dist/ag-grid-community.min.js"></script>

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">使用AG Grid显示Excel数据</title>
    <!-- 引入 AG Grid 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/styles/ag-grid.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/styles/ag-theme-alpine.css">
    <style>
        body { font-family: sans-serif; }
        .ag-theme-alpine {
            --ag-header-background-color: #3253dc;
            --ag-header-foreground-color: white;
        }
    </style>
</head>
<body>
    <h1>AG Grid 数据展示</h1>
    <!-- AG Grid 的容器 -->
    <div id="myGrid" style="height: 500px; width: 100%;" class="ag-theme-alpine"></div>
    <!-- 引入 AG Grid 核心 JS -->
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.2/dist/ag-grid-community.min.js"></script>
    <script>
        // 示例数据（通常是从 SheetJS 或其他地方获取的）
        const rowData = [
            { month: '一月', productA: 150, productB: 200, income: 35000 },
            { month: '二月', productA: 180, productB: 220, income: 41000 },
            { month: '三月', productA: 210, productB: 250, income: 48000 },
            { month: '四月', productA: 190, productB: 230, income: 43000 },
        ];
        // 列定义
        const columnDefs = [
            { headerName: '月份', field: 'month' },
            { headerName: '产品A销量', field: 'productA' },
            { headerName: '产品B销量', field: 'productB' },
            { headerName: '总收入', field: 'income',
              // 自定义单元格渲染器，格式化数字
              valueFormatter: params => `¥${params.value.toLocaleString()}` 
            }
        ];
        // 网格选项
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
            // 开启排序和筛选
            enableRangeSelection: true,
            enableCharts: true // 需要额外引入 chart.js
        };
        // 创建并挂载网格
        document.addEventListener('DOMContentLoaded', function() {
            const eGridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(eGridDiv, gridOptions);
        });
    </script>
</body>
</html>

总结与建议

如果只是静态展示：直接用 HTML <table>,简单高效。
如果需要用户上传/下载 Excel 文件：SheetJS (xlsx) 是不二之选，功能强大且社区活跃，如果对样式要求不高，用 sheet_to_html；如果需要精细控制，就获取 JSON 数据后手动生成表格。
如果是一个功能复杂的后台管理系统或需要强大交互：直接选择 AG Grid 或 Handsontable 这样的专业库，它们能为你节省大量的开发时间，并提供稳定、高性能的数据网格体验，AG Grid 的社区版功能已经非常强大,足以应对大多数场景。

如何用JS在网页中直接显示Excel表格？

方案概览

使用原生 HTML <table> 标签 (最简单)

使用 SheetJS (xlsx) 库 (最常用)

使用专业数据网格库 (如 AG Grid)

总结与建议

使用原生 HTML `<table>` 标签 (最简单)