121 lines
4.3 KiB
HTML
121 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>Exemple pour le développement</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
|
<link href="dev.css" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="../src/js/currency/Currency.js"></script>
|
|
<script type="text/javascript" src="../src/js/xmlwriter/XmlWriter.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.Elements.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.CellCounter.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.XmlWriter.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.Style.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.StyleManager.js"></script>
|
|
<script type="text/javascript" src="../src/js/opendocument/OpenDocument.OdsConverter.js"></script>
|
|
<script type="text/javascript" src="../src/js/Html2Ods.js"></script>
|
|
<script>
|
|
|
|
var options = {
|
|
currency: "EUR",
|
|
datePattern: "DD/MM/YYYY",
|
|
textAlias: "texteAlternatif"
|
|
};
|
|
|
|
function fodsLink() {
|
|
let link = document.getElementById("link");
|
|
link.href = URL.createObjectURL(
|
|
Html2Ods.blob("table", options)
|
|
);
|
|
setTimeout(function () {
|
|
URL.revokeObjectURL(link.href);
|
|
}, 4E4); // 40s
|
|
return true;
|
|
}
|
|
|
|
function fodsContent() {
|
|
document.getElementById("text").innerText = Html2Ods.xml("table", options);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="fodsContent()">
|
|
<h1>Exemple pour le développement</h1>
|
|
<p>Le contenu du fichier .fods est affiché après la table</p>
|
|
<div>
|
|
<p><a href="blob:" download="test1.fods" id="link" onclick="fodsLink()">Version ODS</a></p>
|
|
<table id="table"
|
|
data-od-sheetname="Tableau de suivi"
|
|
data-od-fixed-rows="2"
|
|
data-od-fixed-columns="1"
|
|
>
|
|
<col data-od-style="Longue">
|
|
<colgroup>
|
|
<col data-od-style="Courte">
|
|
</colgroup>
|
|
<colgroup span="2" class="moyennecolonne">
|
|
</colgroup>
|
|
<thead>
|
|
<tr data-od-style="Entete">
|
|
<th colspan="3">Colonne 1</th>
|
|
<th rowspan="2">Colonne 3</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Sous-colonne 1-1</th>
|
|
<th>Sous-colonne 1-2</th>
|
|
<th>Sous-colonne 1-3</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Cellule 1.1</td>
|
|
<td rowspan="2" id="test">Cellule <em>1.2</em>
|
|
<div class="hidden">
|
|
Caché par None
|
|
</div> Suite</td>
|
|
<td>Cellule 1.3
|
|
<div data-od-hidden="true">
|
|
Caché dans OD
|
|
</div> Test à des lignes vides </td>
|
|
<td data-od-style="Heritage">Cellule 1.4</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-od-style="EncorePlusGrande">Cellule 2.1 (Très grande)</td>
|
|
<!--<td>Cellule 2.2</td>-->
|
|
<td data-od-style="Bold">Cellule 2.3</td>
|
|
<td data-od-type="number" class="grandecellule">-160</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="2">Cellule 3.1</td>
|
|
<td data-od-type="currency" data-od-text="1250">1100 €</td>
|
|
<td data-od-type="currency" data-od-currency="USD" data-texte-alternatif="-1315" class="essai">-$2500</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-od-type="date" data-od-text="2020-12-01" data-od-date-pattern="D/M/YY">1/12/20</td>
|
|
<td data-od-type="date" data-od-text="2021-01-11">11/01/2021</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Exemple de correspondance de plusieurs classes</td>
|
|
<td class="class1">Classe 1</td>
|
|
<td class="class2">Classe 2</td>
|
|
</tr>
|
|
<tr data-od-style="HauteurFixe">
|
|
<td></td>
|
|
<td data-od-style="LongTexte"><p>Exemple de texte long avec plusieurs paragraphes</p><p>Et qui ne déborde pas</p><p>quelque soit la longueur (la hauteur est réglée au niveau de l'élement <tr> parent</p></td>
|
|
</tr>
|
|
<tr style="display: none">
|
|
<td>Ligne invisible</td>
|
|
</tr>
|
|
<tr style="display: none" data-od-hidden="false">
|
|
<td>Ligne invisible en HTML, visible en ODS</td>
|
|
</tr>
|
|
<tr data-od-hidden="true">
|
|
<td>Ligne visible en HTML, invisible en ODS</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<pre id="text"></pre>
|
|
</div>
|
|
</body>
|
|
</html>
|