147 lines
5.5 KiB
HTML
147 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<title>Exemple d’utilisation de jsHtml2Ods</title>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||
<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, {
|
||
currency: "EUR",
|
||
datePattern: "DD/MM/YYYY"
|
||
})
|
||
);
|
||
setTimeout(function () {
|
||
URL.revokeObjectURL(link.href);
|
||
}, 4E4); // 40s
|
||
return true;
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<h1>Exemples d’utilisation 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"
|
||
data-od-sheetname="Tableau des projets"
|
||
data-od-fixed-rows="2"
|
||
data-od-fixed-columns="1">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<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">16 175 €</td>
|
||
<td></td>
|
||
<td data-od-type="currency" data-od-text="16175" class="number">16 175 €</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>
|
||
<td data-od-type="currency" data-od-text="16175" class="number">16 175 €</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">15 864 €</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">7 070 €</td>
|
||
<td></td>
|
||
<td data-od-type="currency" data-od-text="7070" class="number">7 070 €</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">3 256 €</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">3 000 €</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>
|
||
</table>
|
||
</body>
|
||
</html>
|