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">&nbsp;</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):

ff-vs-excel1.JPG

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.

ff-vs-excel2.JPG

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 ). 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:

ff-vs-excel3.JPG

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">&nbsp;</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.