Script export donnes table en CSV

**Fredo8** · 08/07/2015, 13h15

Bonjour,

J'ai récupérer ce script JS pour exporter les données d'un tableau HTML

Code html :

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
	<div id="dvData">
	<table id="table_result" border="2">   
		<tr bgcolor="oldlace">	
			<th class=""></th>
			<th colspan="2">Distribution for all categories entityX by sphereN / all sphere all entities</th> 		 
			<th colspan="2">distribution for all categories for each entity by sphereN</th>    
		</tr> 
		<tr bgcolor="oldlace">		  
			<th class=""><div class=“highlight_rankEntity”><a href="index.php?id=recherche_ent">Entity</a></div></th> 		 
			<th class="">Inside</th>  
			<th class="">Outside</th>	
			<th class="">Inside</th>  
			<th class="">Outside</th>	
		</tr> 
                <tr>
                         <td> contruction dynamique </td>
                </tr>
	</table>  	  
	</div>
	<a href="#" class="export">Export Table data into Excel</a>

Et coté JS :

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
$(document).ready(function () {
 
    function exportTableToCSV($table, filename) {
 
        var $rows = $table.find('tr:has(td)'),
 
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
 
            // actual delimiter characters for CSV format
            colDelim = '";"',
            rowDelim = '"\r\n"',
 
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),			 
					//$cols = $row.find('th');
                    $cols = $row.find('td');
 
                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
 
                    return text.replace(/"/g, '""'); // escape double quotes
 
                }).get().join(tmpColDelim);
 
            }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"',
 
            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
 
        $(this)
            .attr({
            'download': filename,
                'href': csvData,
                'target': '_blank'
        });
    }
 
    // This must be a hyperlink
    $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
 
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });
});

2 problèmes :

1/ les balise "titre" <th> ne sont pas prise en compte, comment faire pour les prendre en compte ?
2/ comment faire pour utiliser ce script sur plusieurs tableau dans la même page ?

Merci

**SpaceFrog** · 08/07/2015, 13h44

1)

Code :

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

$cols = $row.find('td');

faut lui faire finder le th aussi

2)

Code :

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

exportTableToCSV($table, filename)

tu passes le table en param ...
Boucle sur la collections de tables de la page ...

**Fredo8** · 08/07/2015, 14h43

1/ Oui, j'ai vu ça, j'avais tester en remplaçant TD par TH ça marche mais bien sur exporte que les th.
2 endroits :

Code :

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

1
2
3
var $rows = $table.find('tr:has(td)'),
[...]
$cols = $row.find('td');

Mais comment faire pour rajouter la gestion du th ? Faut tout dupliquer ?

2/ tester aussi mais ça ne marche pas.

Code :

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

<a href="#" class="export" onclick="exportTableToCSV('dvData>table', 'export.csv');">Export Table data into Excel</a>

J'ai tester différent chose dans les paramètres, mais quand je click rien se passe.

J'ai virer aussi ceci dans la partie JS :

Code :

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

1
2
3
4
5
6
7
8
    // This must be a hyperlink
    $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
 
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });

Après, je ne sais pas a quoi sert ceci, si a garder ou pas :

Code :

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

$(document).ready(function () {

**SpaceFrog** · 08/07/2015, 15h01

As tu testé

Code :

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

$cols = $row.find('th, td');

**Fredo8** · 08/07/2015, 15h24

Ca marche mais avec cela aussi : var $rows = $table.find('tr:has(th,td)'),
Merci

Par contre, ça ne prends pas en compte le colspan, moins gênant mais si y a un petit truc a faire pour que ça soit gérer suis intéressé.

Reste plus a trouvé comment appelé la fonction avec les bon paramètres.

**Fredo8** · 09/07/2015, 10h39

J'ai testé plusieurs chose pour appeler la fonction pour chaque tableau dont ceci :

Code html :

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

1
2
3
<a href="#" class="export" onclick="exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);">Export Table data into Excel</a>	
 
<a href="#" class="export" onclick="exportTableToCSV($('#dvData>table'), 'export.csv');">Export Table data into Excel</a>

Mais rien se passe.

**danielhagnoul** · 09/07/2015, 11h03

<a download="monfichier.csv" href="#" class="export" onclick="return exportTableToCSV(...);">Export Table data into Excel</a>.

Votre fonction exportTableToCSV(...) doit renvoyer du code CSV, je n'ai pas regardé le code de la fonction.

**Fredo8** · 09/07/2015, 11h12

Marche pas, rien se passe.

Envoyé par danielhagnoul

<a download="monfichier.csv" href="#" class="export" onclick="return exportTableToCSV(...);">Export Table data into Excel</a>.

Votre fonction exportTableToCSV(...) doit renvoyer du code CSV, je n'ai pas regardé le code de la fonction.

C'est une fonction que j'ai récupérer sur internet.
Je ne comprends pas trop comment elle fonctionnne.

Peut etre des chose à modifier à ce niveau ? :

Code :

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

1
2
3
4
5
6
$(document).ready(function () {
 
    function exportTableToCSV($table, filename) {
        [...]
    }
});

Code :

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

1
2
3
4
5
6
        $(this)
            .attr({
            'download': filename,
                'href': csvData,
                'target': '_blank'
        });

**danielhagnoul** · 09/07/2015, 22h44

La fonction construit les attributs download et filename en interne.

Voici le code de mon fichier de test, il exporte bien une table CSV mais elle n'est pas correcte à cause des "span" :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        function exportTableToCSV( $table, filename ) {
            var
                $rows = $table.find('tr'),
                tmpColDelim = String.fromCharCode( 11 ), // vertical tab character
                tmpRowDelim = String.fromCharCode( 0 ), // null character
                colDelim = '";"',
                rowDelim = '"\r\n"',
                csv = '"' + $rows.map( function( i, row ){
                    var
                        $row = $(row),
                        $cols = $row.children();
 
                    return $cols.map( function( j, col ){
                        var
                            $col = $( col ),
                            text = $col.text();
 
                        return text.replace( /"/g, '""' ); // escape double quotes
                    })
                    .get()
                    .join( tmpColDelim );
                })
                .get()
                .join( tmpRowDelim )
                .split( tmpRowDelim )
                .join( rowDelim )
                .split( tmpColDelim )
                .join( colDelim ) + '"',
                csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
 
            $( this ).attr({
                'download' : filename,
                'href' : csvData
            });
 
            // debug
            console.log( csv );
        }
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
        });
 
        $( window ).load( function(){
 
            $( "#export" ).on( "click", function( event ){
                var outputFile = window.prompt("Nom du fichier : ") || 'export';
                outputFile = outputFile.replace('.csv','') + '.csv'
                exportTableToCSV.apply( this, [ $( '#table_result' ), outputFile ] );
            });
 
        });
    </script>
</head>
<body>
 
    <div>
        <a href="#" id="export" role='button'>Export The Table Data into a CSV File</a>
    </div>
	<table id="table_result" border="2">
        <tbody>
            <tr bgcolor="oldlace">	
                <th class=""></th>
                <th colspan="2">Distribution for all categories entityX by sphereN / all sphere all entities</th> 		 
                <th colspan="2">distribution for all categories for each entity by sphereN</th>    
            </tr> 
            <tr bgcolor="oldlace">		  
                <th class="">
                    <div class="">
                        <a href="">Entity</a>
                    </div>
                </th> 		 
                <th class="">Inside</th>  
                <th class="">Outside</th>	
                <th class="">Inside</th>  
                <th class="">Outside</th>	
            </tr> 
            <tr>
                <td> contruction dynamique</td>
            </tr>
        </tbody>
	</table>
 
</body>
</html>

**danielhagnoul** · 09/07/2015, 22h57

Je viens de lire :

CSV doesn't handle rowspan or colspan values - it's a very simple format that has no concept of columns or rows beyond it's delimiter and the end of line character.

Le format CSV ne prend pas en compte les "span", donc on ne peut pas faire mieux.

**SpaceFrog** · 10/07/2015, 08h38

Tout dépend de l'utilisation du csv exporté par la suite, mais si c'est juste pour une sauvegarde afin de le réinjecter par la suite dans un page html il est possible d'exporter un json qui sauvegardera les attributs des cellules qui seront alors récupérables à l'import, mais ce n'est plus du csv ...

**Fredo8** · 10/07/2015, 09h53

Merci beaucoup pour votre aide.

Le fichier CSV ne sert pas pour une sauvegarde mais pour exporter les données pour autres choses (je n'ai pas plus de précision).

En fait, ce que j'aimerais c'est quelque chose comme ça :

Code html :

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

1
2
3
4
5
6
7
<table id="table_result_1" border="2">
</table>
<a href="#" class="export" onclick="exportTableToCSV($('#table_result_1'), 'export.csv');">Export Table data into Excel</a>
 
<table id="table_result_2" border="2">
</table>
<a href="#" class="export" onclick="exportTableToCSV($('#table_result_2'), 'export.csv');">Export Table data into Excel</a>

Au passage, a quoi sert : " "use strict"; " ?

Edit :

Une idée :

Code :

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

1
2
3
4
5
6
7
8
       function exportTableToCSV_one() {
 
                var outputFile = window.prompt("Nom du fichier : ") || 'export';
                outputFile = outputFile.replace('.csv','') + '.csv';
                exportTableToCSV.apply( this, [ $( '#table_result' ), outputFile ] );
        }
 
<a href="#" class="export" onclick="exportTableToCSV_one();">Export Table data into Excel</a>	<br>

=> juste la fenêtre pour demander le nom du fichier, apres rien se passe...

**danielhagnoul** · 10/07/2015, 11h10

"use strict";, voir : https://developer.mozilla.org/fr/doc...ce/Strict_mode

Exemple avec deux tables et un autre code, export au format Excel.

À l'ouverture du fichier, Excel produit deux alertes concernant le format et la source, mais il affiche la table correctement.

Ne connaissant pas les particularités du format Excel, je ne sais pas ce qu'il faut faire pour obtenir un code qui ne produit plus ces alertes.

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        var tableToExcel = ( function( ){
            var
                uri = 'data:application/vnd.ms-excel;base64,',
                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
                base64 = function( s ){
                    return window.btoa( unescape( encodeURIComponent( s ) ) );
                },
                format = function( s, c ){
                    return s.replace( /{(\w+)}/g, function( m, p ){
                        return c[ p ];
                    });
                };
 
            return function( objA, table ){
                if ( !table.nodeType ) table = document.getElementById( table );
 
                var ctx = {
                    "worksheet" : 'Worksheet',
                    "table" : table.innerHTML
                };
 
                objA.href = uri + base64( format( template, ctx ) );
            }
        })();
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
        });
 
        $( window ).load( function(){
 
        });
    </script>
</head>
<body>
 
    <div>
        <a download="tableUn.xlt" href="#" onclick="tableToExcel( this, 'table_result' )">Export to Excel</a>
    </div>
	<table id="table_result" border="2">
        <tbody>
            <tr bgcolor="oldlace">	
                <th class=""></th>
                <th colspan="2">Distribution for all categories entityX by sphereN / all sphere all entities</th> 		 
                <th colspan="2">distribution for all categories for each entity by sphereN</th>    
            </tr> 
            <tr bgcolor="oldlace">		  
                <th class="">
                    <div class="">
                        <a href="">Entity</a>
                    </div>
                </th> 		 
                <th class="">Inside</th>  
                <th class="">Outside</th>	
                <th class="">Inside</th>  
                <th class="">Outside</th>	
            </tr> 
            <tr>
                <td> contruction dynamique</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
	</table>
    <hr/>
    <div>
        <a download="tableDeux.xlt" href="#" onclick="tableToExcel( this, 'table_result2' )">Export to Excel</a>
    </div>
	<table id="table_result2" border="2">
        <tbody>
            <tr bgcolor="oldlace">	
                <th class=""></th>
                <th colspan="2">Distribution for all categories entityX by sphereN / all sphere all entities</th> 		 
                <th colspan="2">distribution for all categories for each entity by sphereN</th>    
            </tr> 
            <tr bgcolor="oldlace">		  
                <th class="">
                    <div class="">
                        <a href="">Entity</a>
                    </div>
                </th> 		 
                <th class="">Inside</th>  
                <th class="">Outside</th>	
                <th class="">Inside</th>  
                <th class="">Outside</th>	
            </tr> 
            <tr>
                <td> contruction dynamique</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
	</table>
 
</body>
</html>

**Fredo8** · 10/07/2015, 13h19

Heu merci mais c'est plus au format CSV, c'est du XLT.

**Fredo8** · 11/07/2015, 10h08

J'ai récupérer un autre script pour l'export en CSV, plus simple à utiliser :

Code :

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

1
2
3
<script type="text/javascript" src="excellentexport/excellentexport.min.js"></script>	
 
<a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'table_result', ';');">Export to CSV</a>

cf https://github.com/jmaister/excellentexport

Sinon, je garde aussi le script de danielhagnoul pour le XLT car plus sympa graphiquement.
Par contre, faudrait juste virer les 2 message à l'ouverture du fichier.

Merci

Script export donnes table en CSV

jQuery

Discussions similaires

Partager

Partager