Exporter une <table> vers fichier CSV

**sebhm** · 08/12/2009, 18h20

Bonjour,

je souhaite réaliser (trouver ?

) une fonction javascript/Ajax qui me permettrait d'enregistrer un fichier CSV contenant les données de ma table HTML.

a priori :
(à partir d'un ID d'une table HTML)
- parse la table
- ecrit dans un textarea caché ou une variable le contenu du CSV
- uploade le CSV via AJAX (parce qu'on va avoir du mal à créer un fichier depuis le client)
- crée le fichier (PHP)
- le propose au téléchargement (re AJAX)

j'ai vu quelques trucs intéressants en cherchant, comme la table éditable de bigboomshakala, mais la table est créée en javascript, ce qui n'est pas mon cas.

D'autres ont deja posé la question, et on leur a répondu (à juste titre)
"crée ton fichier en PHP !! "

mes arguments :

- j'ai toute une application pleine de tableaux à rendre exportables (donc soit je me les tape tous en PHP, soit une superbe fonction javascript prend juste un id en entrée et ca roule)
- ca me permet de ne pas stocker les pages CSV inutiles (oui c'est vrai, je peux les supprimer la nuit si ca m'embete...) (il me fallait au moins un second argument à part la flemmingite)

merci de ne pas taper trop fort !

**SpaceFrog** · 08/12/2009, 18h53

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML);
		y++
		}
		CSVText+='"'+ArrLine.join('";"')+'"\n'
		x++
	}
alert	(CSVText)
}
 
</script>
</head>
 
<body onload="createCSV('tableau')">
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
 
</body>

suffit e,suite de faire le send ajax qui pointe sur une page php qui retourne un header de fichier csv et qui fait un echo de ce qu'il reçoit ...

**SpaceFrog** · 08/12/2009, 20h58

le fichier qui envoie les données:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>un</title>
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML);
		y++
		}
		CSVText+=ArrLine.join('\t')+'\n'
		x++
	}
document.getElementById("csvText").value=CSVText
document.forms[0].submit();
}
 
</script>
</head>
 
<body onload="createCSV('tableau')">
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
<form action="csvexport.php" method="post">
<input type="hidden" name="csvText" id="csvText"/>
</form>
 
</body>
 
</html>

le php qui retourne le csv:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?php
header ("Content-Type: application/vnd.ms-excel");
header("Content-disposition: attachement; filename=\"fichier.csv\""); 
echo ($_POST['csvText']);
?>

**SpaceFrog** · 08/12/2009, 21h11

en fait il faut doubler les " dans les cellules

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj)
var Tablignes =tab.getElementsByTagName('tr')
 
var CSVText=""
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td')
	var ArrLine=new Array()
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML.replace(/"/g,'""'));
		y++
		}
		CSVText+='"'+ArrLine.join('","')+'"\r\n'
		x++
	}
document.getElementById("csvText").value=CSVText
 
document.forms[0].submit();
}
 
</script>

ensuite en fonction des versions d'excel le séparateur peut être , ; voire \t

**sebhm** · 08/12/2009, 21h52

merci docteur, combien je vous dois ?

c'est quasi parfait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>un</title>
<script type='text/javascript'>
function  createCSV(obj){
var tab=document.getElementById(obj);
var Tablignes =tab.getElementsByTagName('tr');
 
var CSVText="";
var x=0;
 
while(Tablignes[x]){
	TabCol=Tablignes[x].getElementsByTagName('td');
	var ArrLine=new Array();
	var y=0;
	while (TabCol[y]){
		ArrLine.push(TabCol[y].innerHTML+';');
		y++;
		}
		CSVText+=ArrLine.join('\t')+'\n';
		x++;
	}
document.getElementById("csvText").value=CSVText;
document.forms[0].submit();
}
 
</script>
</head>
 
<body>
 
<table id="tableau" border="1" width="100%">
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
  <tr>
    <td width="20%">un </td>
    <td width="20%">deux</td>
    <td width="20%">trois</td>
    <td width="20%">quatre</td>
    <td width="20%">cinq</td>
  </tr>
  <tr>
    <td width="20%">1</td>
    <td width="20%">2</td>
    <td width="20%">3</td>
    <td width="20%">4</td>
    <td width="20%">5</td>
  </tr>
</table>
 
<p>
<button onclick="createCSV('tableau')">EXPORTER en CSV</button>
</p>
 
<form action="csvexport.php" method="post">
<input type="hidden" name="csvText" id="csvText"/>
</form>
 
</body>
 
</html>

j'ai juste mis un bouton pour lancer la génération du fichier (ca c'est mon niveau

)
Je mets le séparateur ';' entre chaque cellule.

ben c'est super !!

PS : marrant cette habitude que tu sembles avoir de ne pas mettre les ';' apres les instructions javascript

Merci encore

**sebhm** · 08/12/2009, 22h10

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

TabCol=Tablignes[x].getElementsByTagName('td');

on peut trouver des <td> ou des <th>, comment gérer cela quand on ne sait pas dans quel ordre ca peut arriver ??

eventuellement gérer les cellules fusionnées ?

et existe-t-il une fonction DOM pour tester si c'est un noeud texte à l'interieur de la cellule ?
(y'a parfois des images dans les cellules, qui n'ont rien à faire dans le CSV)

Exporter une <table> vers fichier CSV

JavaScript

Vue hybride

Discussions similaires

Partager

Partager