Exporter une <table> vers fichier CSV

Version imprimable

Voir 40 message(s) de cette discussion en une page

18/12/2009, 12h32
kernelfailure
lol

Et ça a été chaud à trouver. Je suis parti du DOM pour finalement en arriver là. La plupart des exemples que je trouvais ne fonctionnaient pas pour créer du CSS à la volée, et les indications de microsoft eux-mêmes étaient loi d'être valable. 8O

L'astuce consiste à attacher un behavior à un ou des éléments en utilisant les selecteurs DOM.
Un behavior, est une propriété dynamique, un comportement.

La première chose était de pouvoir créer du CSS dynamiquement :

Code:

document.createStyleSheet()

Pour ajouter une ou des règle(s):

Code:

document.createStyleSheet().addRule(selector,cssProperties);

En suite, à l'aide de l'attribut behavior:, on va pouvoir changer le comportement des éléments résultant du sélecteur (ici '*', c'est à dire tous).

Le comportement est ici d'ajouter de nouvelles propriétés à tous les éléments du DOM : getElementsByNode(Name|Type), en faisant le binding sur le nouveau prototype d'Element (qui, sous IE7, n'est pas un objet reconnu). Ce binding peut se faire via HTC (url) ou via du code (expression).
Code:

1 2 3 <style> * {behavior: expression(...)} </style>
Nouvelle astuce : comment empiler plusieurs instructions ?
A l'aide de "void(...) || void(...)" : Au moins une évaluation doit être vraie. Comme le résultat est tout le temps 'undefined' on est sur que toutes seront évalué. :ccool:

Code:

* {behavior: expression(void(...)||void(...)...)}

N.B : Un seul behavior par element, le point-virgule sépare les attributs CSS

Il n'y a plus qu'à décorer les éléments en faisant le binding :

Code:

void(this.property = function(){return bind.apply(this, arguments)})

Le reste, c'est CSS qui s'en occupe. :ccool:
(En théorie, Pour mieux comprendre) :

Code:

void(this.width = parseCSSInt(this.height) * 2 + 'px') || void(this.height = this.nexSibling != null ? this.nextSibling.style.height : '20px')

Fait que un élément aura sa largeur 2 fois plus grande que sa hauteur. Sa hauteur étant la même que l'élément suivant de même parent ou de 20pixels par défaut. parseCSSInt serait une fonction qui ferait ce qu'elle semble indiquer. (Pas sur avec le trinaire à cause de ':').

Il y a une gestion de synchronisation à s'assurer avec behavior :
element.onreadystatechange = functionHandle || anonymous;
<SCRIPT FOR = object EVENT = onreadystatechange>

element.readyState == 'uninitialized' || 'loading' || 'loaded' || 'interactive' || 'complete'

C'est ce sur quoi je me penche actuellement.

Bon bah... :mouarf:
Ca fonctionne !
(J'ai des gros problèmes de cache que j'ai du mal à expliquer)

Element.prototype.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
if (!window.Element) { //IE7 hack
	Element = function(){};
   document.createStyleSheet().addRule('*', 'behavior: expression( void(this.getElementsByNodeName = function(){return Element.prototype.getElementsByNodeName.apply(this, arguments)}) || void(this.getElementsByNodeType = function(){return Element.prototype.getElementsByNodeType.apply(this, arguments)}) )');
}
 
Element.prototype.getElementsByNodeName = function (nodeName) {
	var list = new Array();
	list.item = function(i) { return this[i] };
 
	for (var children=this.childNodes, i=0, n=children.length; i<n; i++) {
		var item = children.item(i);
		if (item.nodeName == nodeName) list.push(item);
		if (item.childNodes.length > 0) list = list.concat(item.getElementsByNodeName(nodeName));
	}
 
	return list;
};
 
Element.prototype.getElementsByNodeType = function (nodeType) {
	var list = new Array();
	list.item = function(i) { return this[i] };
 
	for (var children=this.childNodes, i=0, n=children.length; i<n; i++) {
		var item = children.item(i);
		if (item.nodeType == nodeType) list.push(item);
		if (item.childNodes.length > 0) list = list.concat(item.getElementsByNodeType(nodeType));
	}
 
	return list;
};

Finalement, dans le HTML, "onreadystatechange" n'est pas utile pour IE7, le "onload" venant immédiatement après. Mais, sous IE7, l'un ou l'autre sont obligatoire pour le déclenchement des opérations liées aux méthodes getElementsByNode"something" ci-dessus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<script type="text/javascript" src="Element.prototype.js"></script>
<script type="text/javascript">
function MAIN() {
	var mbody = document.getElementsByTagName('BODY')[0];
 
	var txt = mbody.getElementsByNodeName('#text');
	if (document.readyState && document.readyState != 'complete') return;
 
	var str = '';
	for (var i=0, n=txt.length; i<n; i++)
		if (txt[i] != null && txt[i].data != null) str += txt[i].data;
 
	alert(str.replace(/[\s]+/g,' '));
};
</script>
</head>
<body onload="MAIN()">
...

Si quelqu'un connait le prototype de Element sous IE7, je serais très intéressé.

16/04/2014, 15h15
PierrotY

... :ptdr: ... mais qu'est-ce que vous êtes bavards! Il faut être archéologue pour trouver la version finale de la solution, mais je pense que je devrais m'en sortir ;)

Bon, mais en tout cas ça correspond parfaitement à ce que je cherche. Que le grand WEB2.0 vous en remercie :ave: !!
16/04/2014, 15h36
SpaceFrog

Thread vide test

http://jsfiddle.net/5z3eR/

Si ça vous intéresse...

vCSV: transforme un tableau HTML (entête dans thead et corps dans tbody) au format CSV. Si un champ mail est rencontré, on extrait le href (expRegMail). Si une balise <a> est rencontrée, elle est ignorée (expReg).

idTable: id du table
iDeb: numéro de la première colonne à examiner
iFin: numéro de la dernière colonne à examiner
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 function vCSV(idTable, iDeb, iFin) { // iDeb commence à 0 ;) var strCSV = ''; var strSeparateur = ';'; var i = 0; var expRegMail = /<a href="mailto:(.*)">.*<\/a>/g; // Extraction des emails var expReg = /<a.*>.*<\/a>/g; // Tout ce qui est dans des balises a // Récupération de l'entête du tableau $(idTable).find('thead').each(function(){ $(this).find('th').each(function(){ if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expReg, '')+strSeparateur; i++; }); strCSV += '\n'; }); // Récupération de chaque ligne $(idTable).find('tbody').find('tr').each(function(){ i = 0; $(this).find('td').each(function(){ // if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expReg, '')+strSeparateur; if (i >= iDeb && i <= iFin) strCSV += $.trim($(this).html()).replace(expRegMail, '$1').replace(expReg, '')+strSeparateur; i++; }); strCSV += '\n'; }); // Création temporaire et artificielle d'une balise a pour utiliser l'attribut download afin de préciser le nom du fichier... si quelqu'un trouve mieux, je suis preneur! // solution trouvé sur le net... mais je ne sais plus où var tmpA = document.createElement("a"); tmpA.href = 'data:text/csv;charset:UTF-8,'+encodeURIComponent(strCSV); tmpA.download = "tableau.csv"; document.body.appendChild(tmpA); tmpA.click(); document.body.removeChild(tmpA); }
La solution de passer par une balise <a> temporairement n'est pas bien jolie mais je n'ai pas trouvé mieux. L'avantage ici est qu'aucune connexion au serveur n'est effectuée. Étant donné que toutes les données sont sur la page, c'eut été ballot de faire le boulot en PHP... et donc faire travailler les serveurs :mrgreen:
Bien entendu, si vous trouvez à redire sur mon code javascriptoajax, je suis tout ouï.

A+

Voir 40 message(s) de cette discussion en une page