Script export donnes table en CSV

Version imprimable

Bonjour,

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

Code:

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:

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

08/07/2015, 13h44
SpaceFrog

1)

Code:

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

faut lui faire finder le th aussi

2)

Code:

exportTableToCSV($table, filename)

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

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:

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:

<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:

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:

$(document).ready(function () {

08/07/2015, 15h01
SpaceFrog

As tu testé

Code:

$cols = $row.find('th, td');
08/07/2015, 15h24
Fredo8

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.

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

Code:

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.

09/07/2015, 11h03
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.
09/07/2015, 11h12
Fredo8
Marche pas, rien se passe.

Citation:

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:

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

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

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:

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>

09/07/2015, 22h57
danielhagnoul

Je viens de lire :

Citation:

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.
10/07/2015, 08h38
SpaceFrog

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 ...

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:

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:

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...

"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:

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>

10/07/2015, 13h19
Fredo8

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

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

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