如何导出HTML表格至Excel时忽略隐藏行？

问题原因 #

当前使用XLSX.utils.table_to_book时，工具会读取表格中所有DOM元素，包括通过style.display="none"隐藏的行，这些行在Excel中会被设置为隐藏状态，但仍然存在于文件中。

解决方案 #

修改导出函数，手动筛选出当前显示的行，再将这些行的数据转换为Excel工作表。具体步骤：

1. 提取表头数据；
2. 遍历表格行，仅保留搜索行和未被隐藏的数据行；
3. 将筛选后的数据转换为二维数组，再生成Excel文件。

修改后的完整代码 #

JavaScript部分 #

function search(tableId) {
  var table = document.getElementById(tableId);
  var rows = table.getElementsByTagName("tr");

  for (var i = 2; i < rows.length; i++) {
    var hide = false;
    var cells = rows[i].getElementsByTagName("td");
    for (var j = 0; j < cells.length; j++) {
      var input = document.getElementById("REC_" + j);
      if (input && cells[j].innerHTML.toLowerCase().indexOf(input.value.toLowerCase()) == -1) {
        hide = true;
        break;
      }
    }
    rows[i].style.display = hide ? "none" : "";
  }
}

function htmlTableToExcel(type, tableId) {
  const table = document.getElementById(tableId);
  // 收集表头数据
  const headerRows = table.querySelectorAll('thead tr');
  const aoa = [];
  headerRows.forEach(row => {
    const cells = row.querySelectorAll('th');
    const rowData = Array.from(cells).map(cell => cell.textContent.trim());
    aoa.push(rowData);
  });

  // 收集tbody可见行数据
  const tbodyRows = table.querySelectorAll('tbody tr');
  tbodyRows.forEach(row => {
    // 保留搜索行，或未被隐藏的数据行
    const isSearchRow = row.classList.contains('header');
    if (isSearchRow || row.style.display !== 'none') {
      const cells = row.querySelectorAll('td');
      const rowData = Array.from(cells).map(cell => {
        // 提取输入框值或单元格文本
        const input = cell.querySelector('input');
        return input ? input.value.trim() : cell.textContent.trim();
      });
      aoa.push(rowData);
    }
  });

  // 生成并导出Excel
  const worksheet = XLSX.utils.aoa_to_sheet(aoa);
  const excelFile = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(excelFile, worksheet, 'sheet1');
  XLSX.writeFile(excelFile, 'MyTable.' + type);
}

CSS部分（无需修改） #

#MyTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#MyTable th,
#MyTable td {
  text-align: center;
  padding: 12px;
}

#MyTable tr {
  border-bottom: 1px solid #ddd;
}

#MyTable th,
#MyTable tr:hover {
  background-color: #f1f1f1;
}

.divider {
  border-top: 3px solid #bbb;
}

hr.solid {
  border-top: 3px solid #bbb;
}

#MyTable thead tr {
  position: relative;
}

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  border-right: 2px solid silver;
}

.resizer:hover,
.resizing {}

.resizable {
  border: 1px solid gray;
  height: 100px;
  width: 100px;
  position: relative;
}

HTML部分（无需修改） #

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>
<button onclick="htmlTableToExcel('xlsx', 'MyTable')">Excel</button>
<table id="MyTable">
  <thead>
    <tr class="header">
      <th style="">Name </th>
      <th style="">Country </th>
      <th style="">Num1 </th>
      <th style="">Num2 </th>
    </tr>
  </thead>

  <tbody>
    <tr class="header">
      <td> <input type="text" id="REC_0" onkeyup="search('MyTable')"> </td>
      <td> <input type="text" id="REC_1" onkeyup="search('MyTable')"> </td>
      <td> <input type="text" id="REC_2" onkeyup="search('MyTable')"> </td>
      <td> <input type="text" id="REC_3" onkeyup="search('MyTable')"> </td>
    </tr>
    <tr>
      <td style="cursor: pointer">Alfreds Futterkiste</td>
      <td>Germany</td>
      <td>546</td>
      <td>444</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
      <td>456</td>
      <td>458</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>UK</td>
      <td>564</td>
      <td>258</td>
    </tr>
    <tr>
      <td>Koniglich Essen</td>
      <td>Germany</td>
      <td>648</td>
      <td>879</td>
    </tr>
    <tr>
      <td>Alexis</td>
      <td>Germany</td>
      <td>984</td>
      <td>365</td>
    </tr>
  </tbody>
</table>

关键说明 #

• 手动构建数据数组（AO格式）可以精确控制哪些行被包含，避免工具自动读取隐藏元素；
• 搜索行通过header类识别，确保导出时保留当前搜索条件；
• 对输入框单元格提取实际输入值，而非DOM的innerHTML，导出内容更准确。

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