前端复杂table渲染及excel.js导出:数据统一行级组织，兼顾页面和Excel

2023-11-28 17:47:32

在现代化信息管理系统中，表格作为一种重要的数据呈现形式，在前端开发中扮演着不可或缺的角色。前端复杂表格的渲染和Excel导出功能，是许多开发人员经常会遇到的需求。本文将介绍如何使用一套代码兼容页面渲染和Excel生成，实现前端复杂表格的渲染和Excel导出功能。

统一以行的维度进行数据的组织

为了实现一套代码兼容页面渲染和Excel生成的目的，我们需要统一以行的维度进行数据的组织。这意味着，我们将把所有的数据都组织成行，每一行代表一条记录。这种数据组织方式的好处是，它可以很容易地转换为表格格式，无论是HTML表格还是Excel表格。

使用原生table渲染

一旦我们有了以行的维度组织的数据，就可以使用原生HTML table标签来进行渲染。HTML table标签是一个非常强大的工具，它可以用来创建复杂的表格，并支持各种各样的样式和格式。我们可以使用CSS来对表格进行样式化，使其具有美观的外观。

使用excel.js生成Excel文件

如果我们需要导出Excel文件，我们可以使用excel.js库。excel.js是一个开源的JavaScript库，它可以用来生成和导出Excel文件。我们可以使用excel.js来将我们的数据转换为Excel格式，并将其导出为Excel文件。

示例代码

以下是一个使用一套代码兼容页面渲染和Excel生成前端复杂表格的示例代码：

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<button id="export-button">导出Excel</button>

<script>
  // 获取表格数据
  const tableData = [];
  const tableRows = document.querySelectorAll("#table tbody tr");
  tableRows.forEach((row) => {
    const cells = row.querySelectorAll("td");
    const dataRow = [];
    cells.forEach((cell) => {
      dataRow.push(cell.innerText);
    });
    tableData.push(dataRow);
  });

  // 使用excel.js生成Excel文件
  const excel = new ExcelJS.Workbook();
  const worksheet = excel.addWorksheet("Sheet1");
  worksheet.addRows(tableData);

  // 导出Excel文件
  const exportButton = document.getElementById("export-button");
  exportButton.addEventListener("click", () => {
    excel.xlsx.writeBuffer().then((buffer) => {
      const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
      const url = URL.createObjectURL(blob);
      window.open(url);
    });
  });
</script>