A tutorial on how to save an HTML table in an Excel file using the SheetJS JavaScript library.

🌍 The French version of this tutorial: Comment exporter un tableau HTML vers Excel avec SheetJS

Introduction

SheetJS is a JavaScript library that lets you read, modify and export spreadsheets directly from your web browser. It is available under three licenses: Professional Edition, Common Use Cases, and Community Edition.

In this tutorial, we'll use the Community Edition to export an HTML table <table> in Excel .xlsx format, which is a file extension for spreadsheets in Office Open XML format, used by Microsoft Office since 2007.

Follow these four simple steps to save an HTML table as an .xlsx file:

1. Integrate SheetJS into your project

To begin, import SheetJS into your HTML page using the following script:

<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

Integration of the SheetJS library gives us JavaScript access to the XLSX object, which provides functions for reading, modifying and exporting spreadsheets. See the API reference for more information.

2. Add HTML table

Add an HTML table with an ID attribute(table_exportable), as in the example below:

<table id="table_exportable">
	<thead>
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Website</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Wilo Ahadi</td>
			<td>wilo.ahadi@domaine.com</td>
			<td><a href="https://wilo-ahadi.com">www.wilo-ahadi.com</a></td>
		</tr>
		<tr>
			<td>Jeremie Wilondja</td>
			<td>jeremie.wilondja@domaine.com</td>
			<td>-</td>
		</tr>
	</tbody>
</table>

3. Add an export button

Add a button with an ID attribute(export_button), to trigger export of the table to an Excel file:

<button id="export_button">Export to Excel</button>

4. Write export script

Add an event handler to export table data by clicking on the button:

<script>
// Listen for the click event on the button
document.getElementById("export_button").addEventListener("click", function () {

	const table_html = document.getElementById("table_exportable");

	// Create a spreadsheet from the HTML table
	const workbook = XLSX.utils.table_to_book(table_html);

	// Trigger the download of the Excel file
	XLSX.writeFile(workbook, "Mon_Fichier_Excel.xlsx");

});
</script>

In this code :

  • XLSX.utils.table_to_book(table) creates a spreadsheet or workbook from an HTML table element
  • XLSX.writeFile(workbook, file_name) writes a SheetJS workbook object to a local file file_name

Complete example

Here's a complete example of a functional HTML page:

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Export an HTML table to Excel</title>
</head>
<body>

	<!-- HTML table to export -->
	<table id="table_exportable">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Website</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Wilo Ahadi</td>
				<td>wilo.ahadi@domaine.com</td>
				<td><a href="https://wilo-ahadi.com">www.wilo-ahadi.com</a></td>
			</tr>
			<tr>
				<td>Jeremie Wilondja</td>
				<td>jeremie.wilondja@domaine.com</td>
				<td>-</td>
			</tr>
		</tbody>
	</table>

	<!-- Export button -->
	<button id="export_button">Export to Excel</button>

	<!-- Inclusion of the SheetJS library -->
	<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

	<!-- Export script -->
	<script>
	document.getElementById("export_button").addEventListener("click", function () {

		const table_html = document.getElementById("table_exportable");
		const workbook = XLSX.utils.table_to_book(table_html);
		XLSX.writeFile(workbook, "Mon_Fichier_Excel.xlsx");

	});
	</script>

</body>
</html>

With this tutorial, you can now integrate HTML table export to Excel format into your web projects.

Take care! 😎