Bonjour, Il est parfois important de vouloir exporter le contenu de vos pages dans un fichier Excel. Pour cela, la section à exporter doit être un tableau pour permettre à Excel de reconnaitre le type de donnée exportée.
- Vous devez créer un lien ou un bouton sur lequel vous cliqueriez pour exporter votre tableau en Excel:
<a href="javascript:void(0)" onClick="exporterEnExcel('divAexporter')">Exporter en Excel</a>
Lien
EXPLICATION:
Dans le code ci-dessus, j’ai créé un lien en HTML dans lequel j’ai ajouté un évènement de clic onClick= »exporterEnExcel(‘divAexporter’). Cet évènement exécutera ma fonction Javascript appelée exporterEnExcel() qui me permettra d’exporter mon tableau en Excel. Dans la fonction exporterEnExcel() nous avons un paramètre: divAexporter , qui représente l’ID de la section ou tableau à exporter.
2. Création de mon tableau HTML à exporter:
<div id="divAexporter">
<table width="100%" border="1">
<tbody>
<tr>
<th scope="col">N°</th>
<th scope="col">NOM</th>
<th scope="col">PRENOMS</th>
<th scope="col">SEXE</th>
<th scope="col">AGE</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Gueu</td>
<td>Pacôme</td>
<td>M</td>
<td>28</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rush</td>
<td>Ethan</td>
<td>M</td>
<td>8</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Liam</td>
<td>Nathan</td>
<td>M</td>
<td>5</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gueu</td>
<td>Kethian</td>
<td>F</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
tableau à exporter
3. Création de la fonction JavaScript qui nous servira à exporter le tableau HTML
<script>
function exporterEnExcel(param) {
if(confirm("Êtes vous sûr de vouloir exporter ces données, l'exportation prendre unpeu de temps selon les données qui existent")){
var contents = document.getElementById(param).innerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(contents));
}else{
alert("Exportation annulée");
return false;
}
}
</script>
Fonction Javascript
CODE COMPLET:
<a href="javascript:void(0)" onClick="exporterEnExcel('divAexporter')">Exporter mon tableau en excel</a>
<div id="divAexporter">
<table width="100%" border="1">
<tbody>
<tr>
<th scope="col">N°</th>
<th scope="col">NOM</th>
<th scope="col">PRENOMS</th>
<th scope="col">SEXE</th>
<th scope="col">AGE</th>
</tr>
<tr>
<th scope="row">1</th>
<td>Gueu</td>
<td>Pacôme</td>
<td>M</td>
<td>28</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rush</td>
<td>Ethan</td>
<td>M</td>
<td>8</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Liam</td>
<td>Nathan</td>
<td>M</td>
<td>5</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Gueu</td>
<td>Kethian</td>
<td>F</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<script>
function exporterEnExcel(param) {
if(confirm("Êtes vous sûr de vouloir exporter ces données, l'exportation prendre unpeu de temps selon les données qui existent")){
var contents = document.getElementById(param).innerHTML;
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(contents));
}else{
alert("Exportation annulée");
return false;
}
}
</script>
Code complet
