Compare commits
10 Commits
Author | SHA1 | Date | |
---|---|---|---|
54de2e6b22 | |||
ebed56e06e | |||
a31a1561d4 | |||
44f86ab05b | |||
4961156034 | |||
dcaea8a0d0 | |||
21af1607ed | |||
2ff64863ee | |||
272992b10e | |||
760d38cfd6 |
56
README.md
56
README.md
@ -6,10 +6,59 @@ Le principe de cette bibliothèque est de pouvoir écrire un lien proposant une
|
||||
|
||||
Cette bibliothèque est testée sous Firefox ou Chromium pour des tableaux de petite taille.
|
||||
|
||||
## Démonstration de la bibliothèque
|
||||
|
||||
## Options disponible
|
||||
Une démonstration est visible ici : [jshtml2ods.exemole.fr/demo.html](https://jshtml2ods.exemole.fr/demo.html), également disponible via le site [Jsfiddle](https://jsfiddle.net/vcalame/4fxrkzgs/23/) pour faire des tests en direct.
|
||||
|
||||
L'objet options passé en argument peut avoir les propriétés suivantes :
|
||||
## Utilisation de la bibliothèque
|
||||
|
||||
La bibliothèque est contenue dans un seul fichier sans dépendance. La dernière version stable se trouve dans le répertoire *dist/*, voir aussi les versions dans la forge : [forge.chapril.org/vcalame/jsHtml2Ods/releases](https://forge.chapril.org/vcalame/jsHtml2Ods/releases). La dernière version est utilisable directement en ligne : [https://jshtml2ods.exemole.fr/latest/html2ods.js](https://jshtml2ods.exemole.fr/latest/html2ods.js).
|
||||
|
||||
L'utilisation se fait en trois étapes :
|
||||
|
||||
1. Inclure la bibliothèque
|
||||
|
||||
```html
|
||||
<script type="text/javascript" src="https://jshtml2ods.exemole.fr/latest/html2ods.js"></script>
|
||||
```
|
||||
|
||||
2. Avoir dans le texte un lien et une table dotées d'identifiant HTML
|
||||
|
||||
```html
|
||||
<a href="blob:" download="table.fods" id="link" onclick="fodsLink()">Version ODS</a>
|
||||
|
||||
...
|
||||
|
||||
<table id="table">
|
||||
...
|
||||
</table>
|
||||
|
||||
```
|
||||
|
||||
3. Définir la fonction fodsLink indiquée dans l'attribut onclick="fodsLink()" du lien
|
||||
|
||||
```html
|
||||
<script>
|
||||
|
||||
function fodsLink() {
|
||||
let link = document.getElementById("link");
|
||||
link.href = URL.createObjectURL(
|
||||
Html2Ods.blob("table")
|
||||
);
|
||||
setTimeout(function () {
|
||||
URL.revokeObjectURL(link.href);
|
||||
}, 4E4); // 40s
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Cette fonction construit un objet de type Blob associé au lien de téléchargement.
|
||||
|
||||
|
||||
## Options disponibles
|
||||
|
||||
La construction du blob de téléchargement se fait avec l'appel de la fonction Html2Ods.blob qui prend deux arguments : la table (instance de HtmlTableElement ou chaine de caractères indiquant l'identifiant de l'élément) et un objet d'options facultatif. Ce dernier peut avoir les propriétés suivantes :
|
||||
|
||||
- *currency* : monnaie par défaut des valeurs monétaires (peut être modifiée au niveau de la table ou de la cellule)
|
||||
- *datePattern* : formatage par défaut des dates (peut être modifié au niveau de la table ou de la cellule) ; `YYYY-MM-DD` par défaut
|
||||
@ -31,6 +80,8 @@ Il est à noter que les attributs `colspan` et `rowspan` sont reconnus et appliq
|
||||
- `data-od-fixed-rows` : nombre de lignes fixes
|
||||
- `data-od-fixed-columns` : nombre de colonnes fixes
|
||||
|
||||
_Note_ : `data-od-sheetname` est obligatoire pour utiliser `data-od-fixed-rows` ou `data-od-fixed-columns`
|
||||
|
||||
### Éléments `<col>` ou `<colgroup>`
|
||||
|
||||
- `data-od-style` : style de la colonne
|
||||
@ -40,6 +91,7 @@ Il est à noter que les attributs `colspan` et `rowspan` sont reconnus et appliq
|
||||
### Élément `<tr>`
|
||||
|
||||
- `data-od-style` : style de la ligne (en cas d'absence de valeur, un élément `<tr>` a comme style *Header* s'il appartient à un élément `<thead>`, *Standard* sinon)
|
||||
- `data-od-hidden` : avec la valeur 1 ou true, la ligne est cachée dans le fichier résultant, avec la valeur -1 ou false, la ligne est affichée dans le fichier résultant même si la ligne est cachée dans la version HTML
|
||||
|
||||
### Éléments `<td>` ou `<th>`
|
||||
|
||||
|
@ -73,11 +73,11 @@ column.Date {
|
||||
width: 4cm;
|
||||
}
|
||||
|
||||
column.Montant ~ .colonnemontant {
|
||||
column.Montant ~ .colonnemontant {
|
||||
width: 3cm;
|
||||
}
|
||||
|
||||
column.NbreTranches ~ .count {
|
||||
column.NbreTranches ~ .count {
|
||||
width: 1.5cm;
|
||||
}
|
||||
|
||||
|
@ -8,10 +8,10 @@
|
||||
<script type="text/javascript" src="../build/html2ods.js"></script>
|
||||
<script>
|
||||
|
||||
function fodsLink() {
|
||||
let link = document.getElementById("link");
|
||||
function fodsLink(linkdId, tableId) {
|
||||
let link = document.getElementById(linkdId);
|
||||
link.href = URL.createObjectURL(
|
||||
Html2Ods.blob("table", {
|
||||
Html2Ods.blob(tableId, {
|
||||
currency: "EUR",
|
||||
datePattern: "DD/MM/YYYY"
|
||||
})
|
||||
@ -24,11 +24,18 @@ function fodsLink() {
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Exemple d’utilisation de jsHtml2Ods</h1>
|
||||
<p>Basée sur la compilation dans le répertoire build/</p>
|
||||
<div>
|
||||
<p><a href="blob:" download="table.fods" id="link" onclick="fodsLink()">Version ODS</a></p>
|
||||
<table id="table"
|
||||
<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">
|
||||
@ -135,6 +142,5 @@ function fodsLink() {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
4
dist/html2ods.js
vendored
4
dist/html2ods.js
vendored
@ -1,4 +1,4 @@
|
||||
/* version: v1.0 */
|
||||
/* version: v1.0.1 */
|
||||
|
||||
|
||||
var Html2Ods = function (output, table, options) {
|
||||
@ -1556,7 +1556,7 @@ OpenDocument.StyleManager.DEFAULT_STYLES = [
|
||||
name: "Italic",
|
||||
parent: "Standard",
|
||||
properties: {
|
||||
"font-weight": "italic"
|
||||
"font-style": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -404,7 +404,7 @@ OpenDocument.StyleManager.DEFAULT_STYLES = [
|
||||
name: "Italic",
|
||||
parent: "Standard",
|
||||
properties: {
|
||||
"font-weight": "italic"
|
||||
"font-style": "italic"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -70,7 +70,7 @@ OpenDocument.XmlWriter.prototype.addXmlnsAttributes = function () {
|
||||
.addAttribute("xmlns:xhtml", "http://www.w3.org/1999/xhtml")
|
||||
.addAttribute("xmlns:grddl", "http://www.w3.org/2003/g/data-view#")
|
||||
.addAttribute("xmlns:tableooo", "http://openoffice.org/2009/table")
|
||||
.addAttribute("xmlns:vdrawooo", "http://openoffice.org/2010/draw")
|
||||
.addAttribute("xmlns:drawooo", "http://openoffice.org/2010/draw")
|
||||
.addAttribute("xmlns:calcext", "urn:org:documentfoundation:names:experimental:calc:xmlns:calcext:1.0")
|
||||
.addAttribute("xmlns:loext", "urn:org:documentfoundation:names:experimental:office:xmlns:loext:1.0")
|
||||
.addAttribute("xmlns:field", "urn:openoffice:names:experimental:ooo-ms-interop:xmlns:field:1.0")
|
||||
|
Loading…
Reference in New Issue
Block a user