exportation html de table au format csv

Je suis en train d'ajouter une fonctionnalité de csv option de téléchargement sur mon site. Il doit convertir la table html présents dans le site web dans le format csv contenu et de le rendre téléchargeable. Ive été la recherche par le biais de l'internet pour un bon plugin et a trouvé quelques usefule comme http://www.dev-skills.com/export-html-table-to-csv-file/ Mais il utilise un script php pour faire le téléchargement de la partie. Je me demandais si il est un pur bibliothèque javascript disponible pour cette fonction en utilisant le côté de serveur logiciels comme node.js sans l'utilisation de php??

double possible de Exporter au format csv en jQuery
Double Possible de Exporter au format CSV à l'aide de jQuery et html

InformationsquelleAutor sam | 2013-03-21

35

En utilisant simplement jQuery, la vanille Javascript, et la table2CSV bibliothèque:

exportation-de-html-table en tant que fichier csv-using-jquery

Placer ce code dans un script à charger dans la head section:
```
 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})
```
Notes:

Nécessite jQuery et table2CSV: Ajouter des références de script à la fois les bibliothèques avant le script ci-dessus.

La table sélecteur est utilisé comme un exemple, et peut être ajusté à vos besoins.

Il ne fonctionne que dans les navigateurs avec plein Data URI support: Firefox, Chrome et Opera, pas sous IE, qui ne prend en charge Data URIs pour l'intégration binaire des données d'image dans une page.

Pour la pleine compatibilité de navigateur que vous auriez à utiliser une approche légèrement différente qui nécessite un serveur de script côté de echo le CSV.
- Salut... merci pour la réponse... mais quand j'essaie de télécharger la tabletoCsv fichier à partir du lien que vous avez fourni.. il affiche le message d'erreur "page non trouvée"
- Salut @sam, vous pouvez trouver à la bibliothèque ici: table2csv.com
- Merci pour la réponse!!! J'ai vraiment apppreciate de votre aide!! J'ai trouvé une autre option intéressante, après beaucoup de recherche datatables.net/examples
- Content d'avoir pu vous aider.
- table2csv.com est programme en ligne de commande, le lien correct serait de l'italo réponse: kunalbabre.com/projects/table2CSV.php
- J'ai essayé la plupart de ce qui précède, mais le plus simple est celui-ci. jordiburgos.com/post/2014/...
- Poster la solution comme une réponse.
- Fait. Ajouté ça comme réponse.
- Je viens de le mettre à jour. Merci de remarquer.
- Aucun moyen de définir le nom de fichier?
- Il ressemble à table2csv est parti...
InformationsquelleAutor melancia

Il est très simple d'utilisation gratuit et open source de la solution à http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html

D'abord télécharger le fichier javascript et des fichiers d'exemple de https://github.com/jmaister/excellentexport/releases/tag/v1.4

La page html ressemble à ci-dessous.

Assurez-vous que le fichier javascript est dans le même dossier ou modifier le chemin d'accès du script dans le fichier html en conséquence.

<html>
<head>
<title>Export to excel test</title>
<script src="excellentexport.js"></script>
<style>
table, tr, td {
border: 1px black solid;
}
</style>
</head>
<body>
<h1>ExcellentExport.js</h1>
Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.
<h3>Test page</h3>
<br/>
<a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
<br/>
<a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
<br/>
<table id="datatable">
<tr>
<th>Column 1</th>
<th>Column "cool" 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>100,111</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>Text</td>
<td>More text</td>
<td>Text with
new line</td>
</tr>
</table>
</body>

Il est très facile à utiliser ce que j'ai essayé la plupart des autres méthodes.

Ne fonctionne pas dans IE9.
Est-il possible d'utiliser un bouton au lieu d'un point d'ancrage?
Pas de travail, téléchargement de la page HTML.

InformationsquelleAutor Buddhika Ariyaratne

7

Vous n'avez pas besoin de script PHP côté serveur. Le faire dans le côté client uniquement dans les navigateurs qui acceptent Les Données Uri:
```
data:application/csv;charset=utf-8,content_encoded_as_url
```
Les Données URI doit être quelque chose comme:
```
data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333
```
Vous pouvez appeler cette URI par:
- à l'aide de window.open
- ou de réglage de la window.location
- ou par le href d'un point d'ancrage
- par l'ajout du téléchargement de l'attribut ' il fonctionne dans chrome, reste à tester sous IE.
Pour tester, il suffit de copier les Uri ci-dessus et collez-le dans votre barre d'adresse du navigateur. Ou test de l'ancre ci-dessous dans une page HTML:
```
<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>
```
À la création du contenu, d'obtenir les valeurs de la table, vous pouvez utiliser table2CSV mentionné par MelanciaUK et à faire:
```
var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
```
InformationsquelleAutor Italo Borssatto
2

J'ai trouvé il y a une bibliothèque pour cela. Voir exemple ici:

https://editor.datatables.net/examples/extensions/exportButtons.html

En plus le code ci-dessus, le code Javascript suivant la bibliothèque de fichiers sont chargés pour une utilisation dans cet exemple:

En HTML, inclure des scripts suivants:
```
jquery.dataTables.min.js   
dataTables.editor.min.js   
dataTables.select.min.js
dataTables.buttons.min.js  
jszip.min.js    
pdfmake.min.js
vfs_fonts.js  
buttons.html5.min.js    
buttons.print.min.js
```
Boutons d'activation par l'ajout de scripts comme:
```
<script>
$(document).ready( function () {
$('#table-arrays').DataTable({
dom: '<"top"Blf>rt<"bottom"ip>',
buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
select: true,
});
} );
</script>
```
Pour une raison quelconque, excel exporter les résultats dans un fichier corrompu, mais peut être réparé. Sinon, désactiver excel et csv d'exportation.

InformationsquelleAutor jzhou

Devrait fonctionner sur tous les navigateurs actuels et sans jQuery ou de toute dépendance, voici mon oeuvre :

//Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id) {
//Select rows from table_id
var rows = document.querySelectorAll('table#' + table_id + ' tr');
//Construct csv
var csv = [];
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll('td, th');
for (var j = 0; j < cols.length; j++) {
//Clean innertext to remove multiple spaces and jumpline (break csv)
var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
//Escape double-quote with double-double-quote (see https://stackoverflow.com/questions/17808511/properly-escape-a-double-quote-in-csv)
data = data.replace(/"/g, '""');
//Push escaped string
row.push('"' + data + '"');
}
csv.push(row.join(';'));
}
var csv_string = csv.join('\n');
//Download it
var filename = 'export_' + table_id + '_' + new Date().toLocaleDateString() + '.csv';
var link = document.createElement('a');
link.style.display = 'none';
link.setAttribute('target', '_blank');
link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}

Puis ajouter votre bouton de téléchargement/lien :

<a href="#" onclick="download_table_as_csv('my_id_table_to_export');">Download as CSV</a>

Fichier CSV est timedated et compatible avec Excel par défaut format.

InformationsquelleAutor Calumah

Utilisé la réponse ci-dessus, mais modifié pour mes besoins.

J'ai utilisé la fonction suivante et importés à mon RÉAGIR fichier où j'avais besoin de télécharger le fichier csv.

J'ai eu un span tag dans mon th éléments. Ajouter des commentaires à ce que la plupart des fonctions/méthodes.

import { tableToCSV, downloadCSV } from './../Helpers/exportToCSV';
export function tableToCSV(){
let tableHeaders = Array.from(document.querySelectorAll('th'))
.map(item => {
//title = splits elem tags on '\n',
//then filter out blank "" that appears in array.
//ex ["Timestamp", "[Full time]", ""]
let title = item.innerText.split("\n").filter(str => (str !== 0)).join(" ")
return title
}).join(",")
const rows = Array.from(document.querySelectorAll('tr'))
.reduce((arr, currRow) => {
//if tr tag contains th tag.
//if null return array.
if (currRow.querySelector('th')) return arr
//concats individual cells into csv format row.
const cells = Array.from(currRow.querySelectorAll('td'))
.map(item => item.innerText)
.join(',')
return arr.concat([cells])
}, [])
return tableHeaders + '\n' + rows.join('\n')
}
export function downloadCSV(csv){
const csvFile = new Blob([csv], { type: 'text/csv' })
const downloadLink =  document.createElement('a')
//sets the name for the download file
downloadLink.download = `CSV-${currentDateUSWritten()}.csv`
//sets the url to the window URL created from csv file above
downloadLink.href = window.URL.createObjectURL(csvFile)
//creates link, but does not display it.
downloadLink.style.display = 'none'
//add link to body so click function below works
document.body.appendChild(downloadLink)
downloadLink.click()
}

Lorsque l'utilisateur cliquez sur exporter au format csv déclencher la fonction suivante à réagir.

  handleExport = (e) => {
e.preventDefault();
const csv = tableToCSV()
return downloadCSV(csv)
}

Exemple de tableau html elems.

  <table id="datatable">
<tbody>
<tr id="tableHeader" className="t-header">
<th>Timestamp
<span className="block">full time</span></th>
<th>current rate
<span className="block">alt view</span>
</th>
<th>Battery Voltage
<span className="block">current voltage
</span>
</th>
<th>Temperature 1
<span className="block">[C]</span>
</th>
<th>Temperature 2
<span className="block">[C]</span>
</th>
<th>Time & Date </th>
</tr>
</tbody>
<tbody>
{this.renderData()}
</tbody>
</table>
</div>

InformationsquelleAutor Roger Perez

Vous devez vous connecter pour publier un commentaire.