Commentaire sur la fiche : Transformer un tableau HTML en fichier ODS

Si la réponse à cette question ne vous parait pas claire ou si elle vous semble obsolète, n’hésitez pas à nous en faire part.

Et nous sommes preneurs également de toute correction de faute d’orthographe ou de grammaire...

Rappel du texte de la fiche :

Un des usages courants des mini-applications est de proposer des tableaux plus complexes que ceux disponibles par défaut. Une fonction très vite demandée est de pouvoir récupérer facilement ces tableaux dans un tableur pour pouvoir les retravailler, faire des graphiques ou les intégrer à d’autres documents.

Pour ne pas avoir à réécrire entièrement le code et profiter du travail effectué sur les tableaux en HTML, le logiciel BDF comprend une bibliothèque de conversion. Initialement développée au sein du logiciel BDF, celle-ci est devenue une bibliothèque Javascript autonome hébergée ici jsHtml2Ods hébergée ici : forge.chapril.org/vcalame/jsHtml2Ods . On consultera donc ce site pour bénéficier d’une documentation complète de la bibliothèque. Cette fiche décrit les petites différences entre jsHtml2Ods et la bibliothèque intégrée ainsi que les premiers pas pour l’utiliser.

Inclure la bibliothèque dans la mini-application

Au sein du logiciel BDF, la bibliothèque ne s’appelle pas jsHtml2Ods mais OpenDocument. On l’intègre en l’ajoutant dans la liste des bibliothèques définie le fichier de configuration app.ini de l’application sous la forme suivante :

ajout de la bibliothèque

core_jslibs=opendocument

Utilisation dans le code HTML et Javascript

Il faut commencer par introduire des balises <a> classiques. L’attribut download est utile pour indiquer le nom du futur fichier ODS. Une table HTML doit bien sûr être présente par ailleurs, ce sera la source de la conversion en ODS.

Exemple de lien

<table id="table_source_ods">
  <tr><td>...</td></tr>
</table>
<a href="#" download="bailleurs.fods" id="lien_ods">Version Ods</a>

Il faut ensuite associer un évènement Javascript au clic sur le lien. Dans notre exemple, l’association se fait via id mais l’association peut se faire par tout autre moyen.

Association à la balise <a> de l’exemple précédent

document.getElementById("lien_ods").addEventListener("click", function () {
  this.href = URL.createObjectURL(
      OpenDocument.OdsConverter.convertToBlob(document.getElementById("table_source_ods")))
    );
    setTimeout(function () {
    URL.revokeObjectURL(this.href);
    }, 4E4); // 40s
    return true;
});

Par rapport à jsHtml2Ods, la différence tient dans le nom de la fonction appelée (OpenDocument.OdsConverter.convertToBlob au lieu de Html2Ods.blob). Tout le reste est identique.