Comment exporter un tableau HTML vers Excel avec SheetJS

Mis à jour il y a 3 semaines

Un tutoriel pour enregistrer un tableau HTML dans un fichier Excel en utilisant la bibliothèque JavaScript SheetJS

Wilo Ahadi

Auteur

Wilo A.

Technologies

HTML, JavaScript
Voir aussi Un tutoriel pour mettre en place un système d’upload de fichier avec une barre de progression pour suivre l’avancement de l’upload dans un projet Laravel - Vue.js En savoir plus

🌎 La version anglaise de cette publication : How to export an HTML table to Excel with SheetJS

Introduction

SheetJS est une bibliothèque JavaScript qui permet de lire, modifier et exporter des feuilles de calcul directement depuis le navigateur web. Elle est disponible sous trois licences : Professional Edition, Common Use Cases, et Community Edition.

Dans ce tutoriel, nous utiliserons la version Community Edition pour exporter un tableau HTML <table> au format Excel .xlsx, qui est une extension de fichier pour les tableurs au format Office Open XML, utilisé par Microsoft Office depuis 2007.

Suivez ces quatre étapes simples pour enregistrer un tableau HTML dans un fichier .xlsx :

1. Intégrer SheetJS à votre projet

Pour commencer, importez SheetJS dans votre page HTML en utilisant le script suivant :

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

L'intégration de la bibliothèque SheetJS nous permet d'accéder en JavaScript à l'objet XLSX, qui fournit des fonctions pour lire, modifier et exporter des feuilles de calcul. Consultez la référence de l'API pour en savoir plus.

2. Ajouter un tableau HTML

Ajoutez un tableau HTML avec un attribut ID (table_exportable), comme dans l’exemple ci-dessous :

<table id="table_exportable">
	<thead>
		<tr>
			<th>Nom</th>
			<th>Adresse email</th>
			<th>Site web</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Wilo Ahadi</td>
			<td>[email protected]</td>
			<td><a href="https://wilo-ahadi.com">www.wilo-ahadi.com</a></td>
		</tr>
		<tr>
			<td>Jeremie Wilondja</td>
			<td>[email protected]</td>
			<td>-</td>
		</tr>
	</tbody>
</table>

3. Ajouter un bouton d’exportation

Ajoutez un bouton avec un attribut ID (export_button), permettant de déclencher l’exportation du tableau vers un fichier Excel :

<button id="export_button">Exporter vers Excel</button>

4. Écrire le script d’exportation

Ajoutez un gestionnaire d’événements pour exporter les données du tableau en cliquant sur le bouton :

<script>
// Écouter l’événement de clic sur le bouton
document.getElementById("export_button").addEventListener("click", function () {

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

	// Créer une feuille de calcul à partir de la table HTML
	const workbook = XLSX.utils.table_to_book(table_html);

	// Déclencher le téléchargement du fichier Excel
	XLSX.writeFile(workbook, "Mon_Fichier_Excel.xlsx");

});
</script>

Dans ce code :

  • XLSX.utils.table_to_book(table) permet de créer une feuille de calcul ou un classeur à partir d'un élément HTML table
  • XLSX.writeFile(workbook, file_name) permet d'écrire un objet classeur SheetJS workbook dans un fichier local file_name

Exemple complet

Voici l’exemple complet d’une page HTML fonctionnelle :

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

	<!-- Tableau HTML à exporter -->
	<table id="table_exportable">
		<thead>
			<tr>
				<th>Nom</th>
				<th>Adresse email</th>
				<th>Site web</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Wilo Ahadi</td>
				<td>[email protected]</td>
				<td><a href="https://wilo-ahadi.com">www.wilo-ahadi.com</a></td>
			</tr>
			<tr>
				<td>Jeremie Wilondja</td>
				<td>[email protected]</td>
				<td>-</td>
			</tr>
		</tbody>
	</table>

	<!-- Bouton d’exportation -->
	<button id="export_button">Exporter vers Excel</button>

	<!-- Inclusion de la bibliothèque SheetJS -->
	<script src="https://cdn.sheetjs.com/xlsx-0.20.3/package/dist/xlsx.full.min.js"></script>

	<!-- Script d’exportation -->
	<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>

Avec ce tutoriel, vous pouvez maintenant intégrer l’exportation de tableaux HTML au format Excel dans vos projets web.

Portez-vous bien ! 😎

Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.

Wilo Ahadi

Wilo Ahadi, l'auteur

Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School

Voir profil

Commentaires