HTML 将HTML表格导出到Excel(.xls)的单独表格中

在本文中，我们将介绍如何将HTML表格导出到Excel（.xls）文件中，并将其分别保存在单独的工作表中。我们将使用JavaScript和第三方库js-xlsx来实现这个功能。

阅读更多：HTML 教程

准备工作

在开始之前，我们首先需要引入js-xlsx库。你可以通过在HTML文件中添加以下代码来实现：

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

接下来，我们需要定义一个HTML表格，我们将使用这个表格来导出到Excel文件。例如：

<table id="myTable">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Location</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

导出HTML表格到Excel

首先，我们需要编写JavaScript代码来处理导出功能。以下是一个实现这一目标的示例代码：

function exportToExcel() {
  // 获取HTML表格的引用
  var table = document.getElementById("myTable");

  // 创建一个工作簿
  var workbook = XLSX.utils.book_new();

  // 创建一个工作表
  var worksheet = XLSX.utils.table_to_sheet(table);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // 保存工作簿为Excel文件
  XLSX.writeFile(workbook, "table.xls");
}

在以上示例中，我们首先通过getElementById方法获取到HTML表格的引用。然后，我们使用XLSX.utils.table_to_sheet将表格转换为工作表。接下来，我们创建一个新的工作簿，并将工作表添加到工作簿中。最后，我们使用XLSX.writeFile将工作簿保存为Excel文件。

为了让导出功能生效，我们可以在HTML中添加一个按钮，并在点击按钮时调用exportToExcel函数。例如：

<button onclick="exportToExcel()">导出到Excel</button>

现在，当用户点击“导出到Excel”按钮时，HTML表格将被导出到名为“table.xls”的Excel文件中。

切换到单独的工作表

在默认情况下，导出的Excel文件中将只有一个工作表。然而，我们可以通过一些额外的代码来实现将不同的HTML表格导出到不同的工作表中。

首先，我们需要定义多个HTML表格。例如：

<table id="table1">
  <!-- 表格1的内容 -->
</table>

<table id="table2">
  <!-- 表格2的内容 -->
</table>

<!-- 添加更多的HTML表格 -->

接下来，我们需要修改上面的exportToExcel函数，以便在不同的工作表中导出不同的表格。以下是修改后的示例代码：

function exportToExcel() {
  // 获取HTML表格的引用
  var table1 = document.getElementById("table1");
  var table2 = document.getElementById("table2");

  // 创建一个工作簿
  var workbook = XLSX.utils.book_new();

  // 创建第一个工作表
  var worksheet1 = XLSX.utils.table_to_sheet(table1);
  XLSX.utils.book_append_sheet(workbook, worksheet1, "Sheet1");

  // 创建第二个工作表
  var worksheet2 = XLSX.utils.table_to_sheet(table2);
  XLSX.utils.book_append_sheet(workbook, worksheet2, "Sheet2");

  // 保存工作簿为Excel文件
  XLSX.writeFile(workbook, "tables.xls");
}

在以上示例代码中，我们首先获取了不同的HTML表格的引用。然后，我们为每个表格创建一个工作表，并将这些工作表添加到工作簿中。最后，我们将整个工作簿保存为名为“tables.xls”的Excel文件。

现在，当用户点击“导出到Excel”按钮时，每个HTML表格将分别被导出到不同的工作表中。