Grâce aux nouvelles fonctionnalités apportées par le HTML5, il est possible de créer, côté client, un fichier en JavaScript et de le proposer en téléchargement sans développer de service côté serveur pour le diffuser.
Le besoin
Il est légitime dans certains cas de figure d’exporter un tableau HTML au format CSV. Par exemple cette répartition de courriers.
Voici le code HTML correspondant, utilisant Bootstrap.
<div class="row">
<div class="col-sm-offset-4 col-sm-4">
<h3>Courriers</h3>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Date</th>
<th>A ouvrir</th>
<th>Lut</th>
<th>Traité</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>15/12/2014</td>
<td class="text-right">0</td>
<td class="text-right">9</td>
<td class="text-right">7</td>
<td class="text-right">16</td>
</tr>
<tr>
<td>17/12/2014</td>
<td class="text-right">0</td>
<td class="text-right">2</td>
<td class="text-right">1</td>
<td class="text-right">3</td>
</tr>
<tr>
<td>31/12/2014</td>
<td class="text-right">0</td>
<td class="text-right">3</td>
<td class="text-right">1</td>
<td class="text-right">4</td>
</tr>
<tr>
<td>20/01/2015</td>
<td class="text-right">375</td>
<td class="text-right">53</td>
<td class="text-right">13</td>
<td class="text-right">441</td>
</tr>
<tr>
<td>26/01/2015</td>
<td class="text-right">69</td>
<td class="text-right">21</td>
<td class="text-right">0</td>
<td class="text-right">90</td>
</tr>
</tbody>
<tfoot>
<tr>
<th> </th>
<th class="text-right">445</th>
<th class="text-right">91</th>
<th class="text-right">32</th>
<th class="text-right">568</th>
</tr>
</tfoot>
</table>
<a href="#" class="btn btn-success pull-right"><i class="glyphicon glyphicon-export"></i> Exporter</a>
</div>
</div>Dans cet exemple, le bouton “Exporter” permettrait de télécharger un fichier CSV du tableau situé au dessus de lui.
En JavaScript
Pour réaliser cette fonctionnalité uniquement en JavaScript avec jQuery, il est possible d’utiliser la fonctionnalité datauri et un simple lien HTML (balise “a&rdquo ;) ayant deux attributs :
- “href” pour le corps du fichier et son encodage
- “download” pour la proposition de nom du fichier
<a href="#" class="btn btn-success pull-right" download="export-sample.csv">
<i class="glyphicon glyphicon-export"></i> Exporter
</a>Voici une séquence qui va permettre d’initialiser le contenu de notre bouton pour lui permettre de diffuser le fichier CSV.
$(function () {
var dataURL = '';
$('.table tr').each(function () {
var dataRow = '';
$('td,th', this).each(function () {
dataRow += $(this).text() + ";";
});
dataURL += dataRow + '\n';
});
$('.btn').attr('href', 'data:text/csv;charset=utf-8;base64,' + btoa(dataURL));
});Pour information, voir la définition de la fonction btoa.
Résultat
Si l’on clique sur le bouton “Exporter” le navigateur nous propose en téléchargement le fichier suivant (exemple sous Firefox).
On peut alors décider d’ouvrir ce fichier pour voir à quoi il ressemble, et notre tableau est bien là.
Conclusion
Il est possible de générer côté client des fichiers de différents format et de les proposer en téléchargement. Attention cependant, les navigateurs fixent une limite à ce type de format. Il n’est donc pas conseiller de l’utiliser pour une fonctionnalité d’export massive. Pour l’export côté serveur, allez faire un tour ici.
Pour aller plus loin :
Bonne expérimentation !
