Un tutoriel pour enregistrer un tableau HTML dans un fichier Excel en utilisant la bibliothèque JavaScript SheetJS
🌎 La version anglaise de cette publication : How to export an HTML table to Excel with SheetJS
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 :
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.
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>
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>
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
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, 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