使用 JavaScript 将 HTML 表格导出到 Excel

JavaScript 3周前 36

在本教程中，我们将学习如何使用 JavaScript 将 HTML 表格导出到 Excel。

在 JavaScript 中使用 `TabletoExcel` 库将 HTML 表格导出到 Excel

TableToExcel 库可用于将 HTML 表格导出到 Excel 文件。我们将使用 convert() 方法进行必要的转换。

请参考下面的代码。

<button id="btnExport" onclick="exportReportToExcel(this)">Export HTML Table</button>

<script type="text/javascript">
  function exportReportToExcel() {
    let table = document.getElementsByID("table");
    TableToExcel.convert(table[0], {
      name: `file.xlsx`,
      sheet: {
        name: 'Sheet 1'
      }
    });
  }
</script>

在上面的示例中，我们使用 getElementsbyID() 函数获取所需的表格元素。我们将其导出到 excel 文件。还使用 name 和 sheet 属性提供了文件和工作表的名称。

使用 `TableExport` 库将 HTML 表格导出到 JavaScript 中的 Excel 文件

TableExport 库可以将 HTML 表格导出为 XLSX、XLS、CSV 或文本文件。该库使用简单，并提供了广泛的属性来自定义最终文件。

参考下面的代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js" integrity="sha512-XmZS54be9JGMZjf+zk61JZaLZyjTRgs41JLSmx5QlIP5F+sSGIyzD2eJyxD4K6kGGr7AsVhaitzZ2WTfzpsQzg==" crossorigin="anonymous" referrerpolicy="no-referrer">
TableExport(document.getElementsByTagName("table"), {
    filename: 'excelfile',            
    sheetname: "sheet1"                     
});
</script>

在上面的示例中，我们使用 getElementsByTagName() 函数访问所需的 HTML 表。我们使用 filename 和 sheetname 属性来设置最终文件的名称和工作表的名称。

请注意，为了包含 TableExport 库，我们在 HTML 代码的 script 标签中添加了该库的源代码。

使用 `jQuery` 库将 HTML 表格导出到 JavaScript 中的 Excel 文件

我们将使用 table2excel 插件将 HTML 表格数据导出到 Excel 电子表格。这是一个轻量级的 jQuery 插件。

参考下面的代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", type="text/javascript">
  function Export() {
    $("#table").table2excel({
      filename: "file.xls"
    });
  }
</script>