Export HTML pour Excel
Par Cédric Tabin le lundi 25.01.2016, 10:00 - Autre - Lien permanent
Disposant d'un rendu d'une liste en HTML, j'ai du adapter ce dernier afin de pouvoir l'ouvrir dans Excel et que les données soient au bon format. Par défaut, Excel va interpréter les valeurs des différentes cellules à sa sauce et bien souvent, ce n'est pas ce qui est souhaité.
Liste de base
Pour l'exemple, je vais prendre une liste simplifiée en HTML dont voici le code source:
<html> <head> <style> .title { font-weight:bold; font-size:12px; font-family:"Arial"; color:white; background:black; } .total { font-weight:bold; font-size:12px; font-family:"Arial"; border-top:1pt solid black; } .data { font-size:11px; font-family:"Times New Roman"; } .dataLibelle { text-align:left; width:250px; } .dataDate { text-align:center; width:70px; } .dataValeur { text-align:right; width:70px; } table { border:0; border-spacing:0; } </style> </head> <body> <h1>Titre</h1> <table> <thead> <td class="title dataLibelle">Libellé</td> <td class="title dataDate">Date</td> <td class="title dataValeur">Valeur</td> </thead> <tr> <td class="data dataLibelle">Quelque chose</td> <td class="data dataDate">15/10/2015</td> <td class="data dataValeur">2'500.50</td> </tr> <tr> <td class="data dataLibelle">Rien du tout</td> <td class="data dataDate">10/05/2015</td> <td class="data dataValeur">0.00</td> </tr> <tr> <td class="data dataLibelle">Autre chose</td> <td class="data dataDate">25/02/2013</td> <td class="data dataValeur">350.00</td> </tr> <tr> <td class="data dataLibelle">Encore une...</td> <td class="data dataDate">01/01/2014</td> <td class="data dataValeur">12'138.95</td> </tr> <tr> <td class="total dataLibelle">Total</td> <td class="total dataDate"> </td> <td class="total dataValeur">14'989.45</td> </tr> </table> </body> </html>
Voici le rendu entre Firefox et Excel 2010 (simplement en ouvrant le fichier):
On remarque immédiatement que les styles n'ont pas été repris et que les montants ont été tronqués. Cela dit, en explorant les propriétés des cellules dans Excel, on peut voir que les dates et montants ont été "compris" et interprétés comme tels (d'ou l'affichage des montants sans décimales).
Styles CSS
Il se trouve en fait qu'Excel ne supporte pas d'avoir plusieurs classes CSS ! La seule manière de faire pour améliorer l'export, c'est de travailler le fichier pour fusionner les différentes classes et ainsi n'avoir plus qu'un seul style CSS par cellule.
Pour obtenir ce résultat, j'ai simplement créé de nouvelles classes en combinant les propriétés de celles existantes et appliqué ces dernières aux cellules adéquates. Par exemple, pour le titre, voici les définitions:
/* styles mergés pour titres */ .title_dataLibelle { font-weight:bold; font-size:12px; font-family:"Arial"; color:white; background:black; text-align:left; width:250px; } .title_dataDate { font-weight:bold; font-size:12px; font-family:"Arial"; color:white; background:black; text-align:center; width:70px; } .title_dataValeur { font-weight:bold; font-size:12px; font-family:"Arial"; color:white; background:black; text-align:right; width:70px; }
A noter qu'Excel supporte des styles CSS hiérarchisés. Selon l'utilisation, cela peut être une alternative plus intéressante que de fusionner tous les styles...
Format des données
Excel supporte toute une série de styles spéciaux (voir ici et là). Voici les styles que j'ai ajoutés pour "forcer" les différents types:
mso-number-format:'\@'; /* force le format texte */ mso-number-format:'dd\/mm\/yyyy'; /* force le format date */ mso-number-format:'\#\,\#\#0\.00'; /* force un nombre avec 2 chiffres après la virgule */
Voici désormais ce que l'on obtient en ouvrant le document HTML dans Excel:
Il reste encore un petit piège la-derrière: Excel parvient à reconnaître les nombre décimaux ayant la forme 1'500.55
grâce à mes options régionales sur ma machine. Il est par exemple possible d'utiliser une virgule comme séparateur de millier (et non pas un apostrophe) et dans ce cas Excel ne va pas "comprendre" le montant.
Pour éviter cet écueil, il est possible d'indiquer dans le document quel est le format utilisé. Cela se met également dans la balise <style>
:
<!--table {mso-displayed-decimal-separator:'.'; mso-displayed-thousand-separator:'\'';} -->
Formules
Pour afficher une formule à la place d'une valeur, il est possible d'indiquer à Excel ce qu'il doit utiliser au lieu de simplement mettre la valeur spécifiée dans la cellule. Pour cela, il faut modifier un peu l'en-tête du contenu html:
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> ... </html>
Ensuite il suffit simplement d'utiliser l'attribut x:fmla
pour indiquer la formule.
<tr> <td class="total_dataLibelle">Total</td> <td class="total_dataDate"> </td> <td class="total_dataValeur" x:fmla="=SUM(C2:C5)">1'2345.00</td> </tr>
Liste améliorée
J'ai mis en annexe le fichier HTML final avec la liste. Ce fichier peut être directement ouvert avec Excel.