html tableau exporter

Comment exporter une section de page HTML/PHP en Excel avec JavaScript ?

Par défaut

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.

  1. 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