jsHtml2Ods/demos/build.html

147 lines
5.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
2022-08-08 21:45:16 +02:00
<title>Exemple dutilisation de jsHtml2Ods</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
2022-07-30 09:31:18 +02:00
<link href="build.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../build/html2ods.js"></script>
<script>
function fodsLink(linkdId, tableId) {
let link = document.getElementById(linkdId);
link.href = URL.createObjectURL(
Html2Ods.blob(tableId, {
2022-08-08 21:45:16 +02:00
currency: "EUR",
datePattern: "DD/MM/YYYY"
})
);
setTimeout(function () {
URL.revokeObjectURL(link.href);
}, 4E4); // 40s
return true;
}
</script>
</head>
<body>
<h1>Exemples dutilisation de jsHtml2Ods</h1>
<h2>Table réduite à sa plus simple expression</h2>
<p><a href="blob:" download="table.fods" id="link1" onclick="fodsLink('link1', 'table1')">Version ODS</a></p>
<table id="table1">
<tr><td>Cellule 1.1</td><td>Cellule 1.2</td><td>Cellule 1.3</td></tr>
<tr><td colspan="2">Cellule 2.1 + 2.2</td><td>Cellule 2.3</td></tr>
</table>
<h2>Table plus complexe</h2>
<p><a href="blob:" download="table.fods" id="link2" onclick="fodsLink('link2', 'table2')">Version ODS</a></p>
<table id="table2"
2022-08-08 21:45:16 +02:00
data-od-sheetname="Tableau des projets"
data-od-fixed-rows="2"
data-od-fixed-columns="1">
2022-08-08 21:45:16 +02:00
<col data-od-width="7cm" class="text">
<col data-od-width="2cm">
<col span="2" data-od-style="Date">
<colgroup span="4" class="colonnemontant"></colgroup>
<col class="count">
<colgroup>
<col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup>
<colgroup>
<col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup>
<colgroup>
<col data-od-style="Date">
<col class="colonnemontant">
<col data-od-style="AR">
</colgroup>
<thead>
2022-08-08 21:45:16 +02:00
<tr>
<th rowspan="2">Projet</th>
<th rowspan="2">Nomenclature</th>
<th colspan="2">Dates</th>
<th colspan="4">Subvention</th>
<th rowspan="2">Nbre de tranches</th>
<th colspan="3">Tranche 1</th>
<th colspan="3">Tranche 2</th>
<th colspan="3">Tranche 3</th>
</tr>
<tr>
2022-08-08 21:45:16 +02:00
<th class="small">Décision du financement</th>
<th class="small">Réception de la convention</th>
<th class="small">Décidée</th>
<th class="small">en $</th>
<th class="small">Versée</th>
<th class="small">Solde</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
<th class="small">Date</th>
<th class="small">Montant</th>
<th class="small">AR</th>
</tr>
</thead>
<tbody>
<tr>
2022-08-08 21:45:16 +02:00
<td>Jardins partagés</td>
<td>BIO</td>
<td data-od-type="date" data-od-text="2020-12-01" class="number">01/12/2020</td>
<td data-od-type="date" data-od-text="2021-01-11" class="number">11/01/2021</td>
<td data-od-type="currency" data-od-text="16175" class="number">16175 €</td>
<td></td>
<td data-od-type="currency" data-od-text="16175" class="number">16175 €</td>
<td data-od-type="currency" data-od-text="0" class="number">0 €</td>
<td data-od-type="number" class="number">1</td>
<td data-od-type="date" data-od-text="2021-01-11">11/01/2021</td>
2022-08-08 21:45:16 +02:00
<td data-od-type="currency" data-od-text="16175" class="number">16175 €</td>
<td class="check"></td>
</tr>
<tr>
<td>Panneaux photovoltaïques</td>
<td>ERG</td>
<td data-od-type="date" data-od-text="2021-01-05" class="number">05/01/2021</td>
<td data-od-type="date" data-od-text="2021-04-25" class="number">25/04/2021</td>
<td data-od-type="currency" data-od-text="15864" class="number">15864 €</td>
<td data-od-type="currency" data-od-currency="USD" data-od-text="15864" class="number" data-od-style="Dollar">$16 500</td>
<td data-od-type="currency" data-od-text="11898" class="number">11 898 €</td>
<td data-od-type="currency" data-od-text="3966" class="number" data-od-style="NonSolde">3 966 €</td>
<td data-od-type="number" class="number">3</td>
<td data-od-type="date" data-od-text="2021-05-01">01/05/2021</td>
<td data-od-type="currency" data-od-text="7932" class="number">7 932 €</td>
<td class="check"></td>
<td data-od-type="date" data-od-text="2021-09-15">15/09/2021</td>
<td data-od-type="currency" data-od-text="3966" class="number">3 966 €</td>
<td class="check" data-od-style="Absent" data-od-text="-"></td>
</tr>
<tr>
<td>Logiciels libres</td>
<td>LL</td>
<td data-od-type="date" data-od-text="2020-10-15" class="number">15/10/2020</td>
<td data-od-type="date" data-od-text="2020-11-30" class="number">30/11/2020</td>
<td data-od-type="currency" data-od-text="7070" class="number">7070 €</td>
<td></td>
<td data-od-type="currency" data-od-text="7070" class="number">7070 €</td>
<td data-od-type="currency" data-od-text="0" class="number">0</td>
<td data-od-type="number" class="number">3</td>
<td data-od-type="date" data-od-text="2021-05-01">01/05/2021</td>
<td data-od-type="currency" data-od-text="3256" class="number">3256 €</td>
<td class="check"></td>
<td data-od-type="date" data-od-text="2021-06-07">07/06/2021</td>
<td data-od-type="currency" data-od-text="3000" class="number">3000 €</td>
<td class="check" data-od-style="Absent" data-od-text="-"></td>
<td data-od-type="date" data-od-text="2021-12-21">21/12/2021</td>
<td data-od-type="currency" data-od-text="814" class="number">814 €</td>
<td class="check"></td>
</tr>
</tbody>
2022-08-08 21:45:16 +02:00
</table>
</body>
</html>