Exporter un tableau HTML paginé en CSV

**L_air** · 06/05/2015, 16h42

Hello world,

Je me tourne vers vous car je n'arrive décidément pas à exporter en entier un tableau HTML paginé. Je précise que j'utilise CakePHP 3.0 et c'est lui qui gère la pagination.

code javascript

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
 
function exportTableToCSV($table, filename) {
		var $headers = $table.find('tr:has(th)')
		,$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
		var csv = '"';
		csv += formatRows($headers.map(grabRow));
		csv += rowDelim;
		csv += formatRows($rows.map(grabRow)) + '"';
		// Data URI
		var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
		$(this)
		.attr({
		'download': filename
		,'href': csvData
		//,'target' : '_blank' //if you want it to open in a new window
		});
		//------------------------------------------------------------
		// Helper Functions
		//------------------------------------------------------------
		// Format the output so it has the appropriate delimiters
			function formatRows(rows){
				return rows.get().join(tmpRowDelim)
				.split(tmpRowDelim).join(rowDelim)
				.split(tmpColDelim).join(colDelim);
			}
		// Grab and format a row from the table
			function grabRow(i,row){
				var $row = $(row);
				//for some reason $cols = $row.find('td') || $row.find('th') won't work...
				var $cols = $row.find('td');
				if(!$cols.length) $cols = $row.find('th');
				return $cols.map(grabCol)
				.get().join(tmpColDelim);
			}
		// Grab and format a column from the table
			function grabCol(j,col){
				var $col = $(col),
				$text = $col.text();
				return $text.replace('"', '""'); // escape double quotes
			}
	}
	// This must be a hyperlink
	$("#export").click(function (event) {
		// on recupere la date d'aujourd'hui
		var date = new Date();
		// var outputFile = 'export'
		var outputFile = 'export';
		outputFile = outputFile.replace('.csv','') + '.csv'
		// CSV
		exportTableToCSV.apply(this, [$('#resConservation>table'), outputFile]);
		// IF CSV, don't do event.preventDefault() or return false
		// We actually need this to be a typical hyperlink
	});

Code PHP

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
 
<div class="conservations index large-10 medium-9 columns" id="resConservation" >
    <table id="tabResConservation" cellpadding="0" cellspacing="0">
 
        <tr>
            <th><?= $this->Paginator->sort('Préfixe') ?></th>
            <th><?= $this->Paginator->sort('Numéro de boîte') ?></th>
            <th><?= $this->Paginator->sort('Type de conservation') ?></th>
            <th><?= $this->Paginator->sort('Date de création') ?></th>
            <th><?= $this->Paginator->sort('Date de modification') ?></th>
            <th><?= $this->Paginator->sort('Généralités') ?></th>
            <th><?= $this->Paginator->sort('Remarques') ?></th>
            <th><?= $this->Paginator->sort('ID') ?></th>
            <th class="actions"><?= __('Actions') ?></th>
        </tr>
 
    </table>
    <div class="paginator">
        <ul class="pagination">
            <?= $this->Paginator->prev('< ' . __('previous')) ?>
            <?= $this->Paginator->numbers() ?>
            <?= $this->Paginator->next(__('next') . ' >') ?>
        </ul>
        <p><?= $this->Paginator->counter() ?></p>
    </div>
</div>
 
<div class='button'>
	<a href="#" id ="export" role='button'>CSV</a>
</div> 
 
<?php include('csv.ctp'); ?>
 
<script>
	var tab = <?php echo json_encode($conservations); ?>;
	var idElementTableau = document.getElementById('tabResConservation');
	var newRow;
 
	for (var i=0 ; i<tab.length ; i++){
		newRow = idElementTableau.insertRow(-1);
		for (var j=0 ; j<8 ; j++){
			eval("var newCell" + j + "=newRow.insertCell(j);");
		}
		newCell0.innerHTML = tab[i]['dico_prefix_conserv']['name'];
		newCell1.innerHTML = tab[i]['numero_boite'];
		newCell2.innerHTML = tab[i]['dico_type_conserv']['name'];
		newCell3.innerHTML = "NC";
		newCell4.innerHTML = "NC";
		newCell5.innerHTML = tab[i]['generalites'];
		newCell6.innerHTML = tab[i]['remarques'];
		newCell7.innerHTML = tab[i]['id'];
	} 
</script>

Le code marche mais je n'arrive qu'à exporter la page courante affichée ... Pouvez-vous m'aider pour exporter TOUT le tableau ?
Je suis ouvert à toute proposition même si elle implique une méthode différente.

Merci d'avance

**mathieu** · 07/05/2015, 09h58

apparemment le code PHP ne génère qu'une page et donc le code JavaScript n'a accès qu'à cette page
pour exporter tout le contenu, essaye peut-être d'enlever la pagination en PHP pour tout afficher

**L_air** · 07/05/2015, 13h59

Merci beaucoup pour ta réponse Jar Jar Binks

. Cependant je souhaiterais tout de même garder la pagination sur la page, car le tableau affiché contient plus de 20 000 lignes.

Tu ne connaîtrais pas une solution ? Enfin est-ce seulement faisable ?

**lalouve** · 07/05/2015, 22h08

Le plus simple est d'écrire un script PHP qui génère le fichier CSV et de l'appeler dans le href de ton lien #export.
Avec les bons header(), le fichier se téléchargera directement en cliquant sur le lien sans changer de page.

**L_air** · 07/05/2015, 23h45

Merci lalouve !

Du coup si j'ai bien compris, je créé une vue spéciale pour l'élaboration du csv et son téléchargement. Je passe à cette vue le tableau en entier (et non partiel à cause du paginate) par le biais du contrôleur. Cette vue sera alors appellée dans le href. C'est bien ça ?

Je ne vais pouvoir tester que lundi, donc je vous tiens au courant dans tous les cas !

Ps: Je ne sais pas si tu connais cakePHP mais au cas où tu te demande pourquoi je parle de vues et de contrôleurs c'est parce que c'est un framework qui utilise le modèle MVC

**lalouve** · 08/05/2015, 00h01

Oui, c'est bien de cela dont il s'agit (en fait, il faudrait à présent plutôt en discuter sur le forum PHP que JavaScript).

La vue à laquelle tu transmets le tableau est super basique, sans layout (cf. format CSV).

Regarde du coté des headers HTTP suivants pour le téléchargement :

Code PHP :

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

1
2
3
header('Content-Type: application/csv');
header('Content-Disposition: attachment; filename="export.csv"');
header('Content-transfer-encoding: 8bit');

**L_air** · 09/05/2015, 13h29

D'accord, j'essaie ça lundi et si jamais j'ai un souci je posterai sur le forum PHP

Je mets le post en résolu du coup. Merci encore pour ton aide !!

Exporter un tableau HTML paginé en CSV

JavaScript

Discussions similaires

Partager

Partager