使用 JavaScript 将 HTML 表格导出到 Excel
Kushank Singh
2023年1月30日
2021年10月2日
-
在 JavaScript 中使用
TabletoExcel库将 HTML 表格导出到 Excel -
使用
TableExport库将 HTML 表格导出到 JavaScript 中的 Excel 文件 -
使用
jQuery库将 HTML 表格导出到 JavaScript 中的 Excel 文件
Excel 电子表格用于将表格数据存储在一张或多张工作表中。
在本教程中，我们将学习如何使用 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>
我们使用 $(table) 访问了所需的表。table2excel 构造函数将其转换为所需的文件。