怎么将JavaScript读取的Excel数据动态渲染为HTML表格

在前端网页中读取本地 Excel 文件并动态呈现为表格，解决路径可以清晰拆解为三个阶段：首先利用 HTML 原生 <input type="file"> 捕获文件，并经由 FileReader 对象读取为底层二进制流（ArrayBuffer）；接着借助通用的 Excel 解析库（如轻量级 SheetJS / xlsx）反序列化二进制数据，提取指定工作表并转化为规范的二维数组；最后通过原生 DOM 操作结合 DocumentFragment 内存片段，批量生成带有 <thead> 与 <tbody> 的标准 HTML 表格挂载到页面上。本文将按照实际开发流程逐步展开，提供完整可运行代码并说明空单元格、日期转换及防 XSS 注入等关键细节。

一、前置准备与解析方案选择

现代 Excel 文件（扩展名为 .xlsx）本质上是由多个 XML 文件通过 ZIP 算法打包压缩构成的复杂集合。纯原生 JavaScript 虽然可以通过 DecompressionStream 等底层 API 解压并解析内部 XML，但需要自行处理共享字符串表（sharedStrings.xml）、工作表关联映射（workbook.xml.rels）以及单元格跨度等极为繁复的规范细节。在实际业务开发中，选择成熟稳定、无运行依赖的轻量前端解析库是兼顾开发效率与兼容性的稳妥做法。

业内最通用的标准方案是 SheetJS（又称 xlsx.js）。它提供了完整的单文件编译版本，既支持在无打包环境的静态网页中直接通过 <script> 标签引入，也支持在 npm 工程化项目中按需导入。对于基础的读取与呈现需求，引入该库的核心解析文件即可完成全量解析。

二、核心实现步骤详解

1. 搭建基础页面结构

页面只需提供两个基础元素：一个允许用户选择 Excel 文件的输入框，以及一个用于容纳动态生成表格的挂载容器（例如一个 div 容器）：

<!-- 文件选择控件：限制仅支持 .xlsx 与 .xls 格式 -->
<input type="file" id="excel-file-input" accept=".xlsx, .xls" />

<!-- 动态表格挂载容器 -->
<div id="table-container"></div>

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

2. 监听文件选择并读取二进制数据

给输入框绑定 change 事件监听器。当用户选择文件后，通过 event.target.files[0] 获取原生 File 对象。这里必须使用 FileReader.prototype.readAsArrayBuffer() 方法读取文件，而不能使用 readAsText()，因为二进制 Excel 数据如果按文本编码读取会导致数据损坏：

const fileInput = document.getElementById('excel-file-input');

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

  const reader = new FileReader();

  // 读取完成回调
  reader.onload = function (e) {
    const arrayBuffer = e.target.result;
    parseAndRenderExcel(arrayBuffer);
  };

  // 以 ArrayBuffer 二进制格式加载
  reader.readAsArrayBuffer(file);
});

3. 将二进制流解析为结构化二维数组

在回调函数中调用 XLSX.read 解析内存中的 ArrayBuffer，获取整本工作簿对象（Workbook）。通常情况下，一个 Excel 包含多个工作表（Sheet），我们先提取第一个 Sheet 的名称，获取对应的工作表对象：

function parseAndRenderExcel(data) {
  // 1. 解析二进制工作簿
  const workbook = XLSX.read(data, { type: 'array' });

  // 2. 获取第一个工作表的名称和对象
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];

  // 3. 将工作表转换为二维数组格式
  const rows = XLSX.utils.sheet_to_json(worksheet, {
    header: 1,    // 强制输出格式为二维数组：[[A1, B1], [A2, B2]]
    defval: ''     // 遇到空单元格填充为空字符串，避免列偏移
  });

  // 4. 将规整后的二维数组交给渲染引擎
  renderTable(rows);
}

三、动态构建与渲染 HTML 表格

获取到二维数组 rows 后，需要将其映射为标准的 <table>、<thead> 与 <tbody> 节点。第一行（索引 0）作为表头渲染为 <th>，后续行（索引 1 及之后）循环渲染为 <td> 数据单元格。

1. 内存组装与批量挂载

为了保证渲染性能，严禁在遍历每一行、每一个单元格时直接操作页面上的已有 DOM，这会引发浏览器频繁的布局重排（Reflow）。推荐创建独立的 DocumentFragment 内存片段，在内存中完成整棵表格树的组装后，仅执行一次挂载：

function renderTable(rows) {
  const container = document.getElementById('table-container');
  container.innerHTML = ''; // 清空已有历史内容

  if (!rows || rows.length === 0) {
    container.textContent = 'Excel 文件内容为空';
    return;
  }

  // 创建表格根元素与内存片段
  const table = document.createElement('table');
  table.className = 'rendered-excel-table';
  const fragment = document.createDocumentFragment();

  // 1. 构建表头 thead
  const thead = document.createElement('thead');
  const headerTr = document.createElement('tr');
  const headerData = rows[0];

  headerData.forEach(colName => {
    const th = document.createElement('th');
    th.textContent = colName !== undefined ? String(colName) : '';
    headerTr.appendChild(th);
  });
  thead.appendChild(headerTr);
  table.appendChild(thead);

  // 2. 构建表体 tbody
  const tbody = document.createElement('tbody');
  const bodyData = rows.slice(1);

  bodyData.forEach(rowData => {
    const tr = document.createElement('tr');
    
    // 按表头的列数对齐遍历，确保缺省列完整闭合
    headerData.forEach((_, colIndex) => {
      const td = document.createElement('td');
      const cellVal = rowData[colIndex];
      // 使用 textContent 纯文本设值，阻断 XSS 脚本注入
      td.textContent = cellVal !== undefined && cellVal !== null ? String(cellVal) : '';
      tr.appendChild(td);
    });
    
    tbody.appendChild(tr);
  });
  table.appendChild(tbody);

  // 一次性挂载到页面 DOM 容器
  fragment.appendChild(table);
  container.appendChild(fragment);
}

四、关键细节与边界防护

1. 防御 XSS 注入风险

在解析非受信的外部 Excel 文件时，内容安全是不容忽视的环节。部分攻击者可能在 Excel 单元格中预埋恶意的 HTML 标签或脚本代码（例如 <script>alert(1)</script> 或 <img src="x" onerror="...">）。如果在生成表格时直接使用 td.innerHTML = cellValue 拼接字符串，浏览器解析时就会立刻执行恶意脚本，造成存储型 XSS 漏洞。

防范规范：始终使用 DOM 节点的 textContent 属性写入单元格数据。textContent 会直接将赋值内容视作纯文本字符流，将尖括号等特殊字符在内核中转义呈现，不会触发任何 DOM 解析行为。

2. Excel 日期序列号格式还原

Excel 在其底层并不将日期存储为 "2023-10-31" 这样的可见字符串，而是存储为相对于 1900 年 1 月 1 日的天数序列号（如 45230）。如果直接按原始值解析，页面上会显示一串晦涩的纯数字。

解决办法：在调用 XLSX.read 时增加两个选项 cellDates: true 与 dateNF: "yyyy-mm-dd"：

const workbook = XLSX.read(data, {
  type: 'array',
  cellDates: true,             // 将日期单元格反序列化为 JavaScript 原生 Date 对象
  dateNF: 'yyyy-mm-dd'         // 格式化输出字符串模版
});

五、端到端完整单文件实例

下面是一个经过模块整合的完整 HTML 文件代码，包含样式渲染、状态提示、安全防护及完整逻辑。读者可将其保存为 .html 文件直接在浏览器中打开验证：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Excel 转 HTML 表格完整示例</title>
  <!-- 引入 SheetJS -->
  <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 30px;
      background-color: #f7f9fa;
      color: #333;
    }
    .upload-card {
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      max-width: 900px;
      margin: 0 auto;
    }
    .controls {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .table-viewport {
      max-height: 500px;
      overflow: auto;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
    }
    table.excel-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      text-align: left;
    }
    table.excel-table th {
      position: sticky;
      top: 0;
      background: #30363c;
      color: #fff;
      padding: 10px 14px;
      font-weight: 600;
      z-index: 1;
    }
    table.excel-table td {
      padding: 9px 14px;
      border-bottom: 1px solid #edf2f7;
      white-space: nowrap;
    }
    table.excel-table tr:nth-child(even) {
      background-color: #f8fafc;
    }
    table.excel-table tr:hover {
      background-color: #f1f5f9;
    }
    .empty-state {
      padding: 40px;
      text-align: center;
      color: #94a3b8;
    }
  </style>
</head>
<body>

<div class="upload-card">
  <h3 style="margin-top:0;">选择 Excel 文件并渲染</h3>
  <div class="controls">
    <input type="file" id="excel-file" accept=".xlsx, .xls" />
    <span id="status-tip" style="font-size:13px; color:#64748b;">支持 .xlsx / .xls</span>
  </div>

  <div class="table-viewport">
    <div id="table-output" class="empty-state">请先在上方选择 Excel 文件</div>
  </div>
</div>

<script>
  const inputEl = document.getElementById('excel-file');
  const outputEl = document.getElementById('table-output');
  const tipEl = document.getElementById('status-tip');

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

    tipEl.textContent = '正在解析：' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)...';

    const reader = new FileReader();
    reader.onload = function(evt) {
      try {
        const data = evt.target.result;
        const workbook = XLSX.read(data, {
          type: 'array',
          cellDates: true,
          dateNF: 'yyyy-mm-dd'
        });

        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        const matrix = XLSX.utils.sheet_to_json(worksheet, {
          header: 1,
          defval: ''
        });

        renderDOM(matrix);
        tipEl.textContent = '解析成功：共 ' + matrix.length + ' 行数据（工作表：' + sheetName + '）';
      } catch (err) {
        tipEl.textContent = '解析失败：' + err.message;
        outputEl.innerHTML = '<div class="empty-state" style="color:#e53e3e;">文件解析出错，请检查格式</div>';
      }
    };
    reader.readAsArrayBuffer(file);
  });

  function renderDOM(data) {
    outputEl.innerHTML = '';
    if (!data || data.length === 0) {
      outputEl.innerHTML = '<div class="empty-state">该工作表无有效数据</div>';
      return;
    }

    const table = document.createElement('table');
    table.className = 'excel-table';
    const fragment = document.createDocumentFragment();

    // 表头
    const thead = document.createElement('thead');
    const headRow = document.createElement('tr');
    const colCount = data[0].length;

    data[0].forEach(text => {
      const th = document.createElement('th');
      th.textContent = text !== '' ? String(text) : '未命名列';
      headRow.appendChild(th);
    });
    thead.appendChild(headRow);
    table.appendChild(thead);

    // 表体
    const tbody = document.createElement('tbody');
    const rows = data.slice(1);

    rows.forEach(item => {
      const tr = document.createElement('tr');
      for (let i = 0; i < colCount; i++) {
        const td = document.createElement('td');
        const val = item[i];
        if (val instanceof Date) {
          td.textContent = val.toISOString().slice(0, 10);
        } else {
          td.textContent = (val !== undefined && val !== null) ? String(val) : '';
        }
        tr.appendChild(td);
      }
      tbody.appendChild(tr);
    });

    table.appendChild(tbody);
    fragment.appendChild(table);
    outputEl.appendChild(fragment);
  }
</script>

</body>
</html>

六、总结与技术选型建议

综上所述，利用 JavaScript 将 Excel 数据动态渲染为 HTML 表格的核心逻辑是清晰且标准化的。在具体技术选型与实现中，建议遵循以下原则：

• 数据输入与解码：严选 FileReader.prototype.readAsArrayBuffer，避免由字符集编码问题引入乱码。
• 结构规整化：提取工作表时务必配置 header: 1 和 defval: ''，使用一致的二维数组抹平稀疏矩阵带来的空缺，确保表头与表体严格对齐。
• 安全第一：绝对不要使用未清洗的字符串拼装 innerHTML，所有单元格文本统一使用 textContent 设值，阻断恶意脚本注入。
• 吞吐与性能：日常办公场景下（小于 1000 行），使用 DocumentFragment 即可获得平滑流畅的毫秒级渲染；若需处理数万行级别的巨型表格，应在此基础上引入基于视口的虚拟滚动或前后端分页加载，以避免海量 DOM 节点耗尽浏览器渲染管线资源。