exporter la table html vers csv

j'essaie d'ajouter une fonctionnalité de téléchargement csv sur mon site web. Il devrait convertir la table html présente dans le site Web en contenu csv et le rendre téléchargeable. J'ai cherché sur internet pour trouver un bon plugin et j'ai trouvé des plugins usefule comme http://www.dev-skills.com/export-html-table-to-csv-file/ mais il utilise le script php pour faire la partie de téléchargement. Je me demandais s'il y avait une bibliothèque javascript pure disponible pour faire cette fonctionnalité en utilisant les logiciels côté serveur comme nœud.js sans l'utilisation de php??

35
demandé sur sam 2013-03-21 16:12:35

4 réponses

en utilisant juste jQuery et la vanille Javascript:

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

Mettez ce code dans un script à charger dans la head l'article:

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

il faut jQuery et table2CSV: ajouter des références de script aux deux bibliothèques avant le script ci-dessus.

table le sélecteur est utilisé comme exemple, et peut être ajusté en fonction de votre besoin.

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 intégrer des données d'image binaires dans une page.

pour une compatibilité totale avec le navigateur, vous devez utiliser une approche légèrement différente qui nécessite un script côté serveur pour echo le CSV.

29
répondu melancia 2017-06-08 12:37:39

Il y a une solution libre et open source très facile à http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html

tout d'abord, téléchargez le fichier javascript et des exemples de fichiers à partir 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 conséquent.

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

10
répondu Buddhika Ariyaratne 2015-01-29 14:00:20

vous n'avez pas besoin de script PHP du côté du serveur. Faites cela du côté client seulement, dans les navigateurs qui acceptent URIs De Données:

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:

  • en utilisant window.open
  • ou de la window.location
  • ou par le href d'une ancre
  • en ajoutant l'attribut download, il fonctionnera dans chrome, il reste à tester dans IE.

pour tester, il suffit de copier L'URIs ci-dessus et de le coller dans la barre d'adresse de votre navigateur. Ou tester 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>

Pour créer le contenu, d'obtenir les valeurs de la table, vous pouvez utiliser tableau 2csv mentionné par MelanciaUK et faire:

var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
6
répondu Italo Borssatto 2017-05-23 10:31:16

j'ai trouvé qu'il y a une bibliothèque pour ça. Voir exemple ici:

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

en plus du code ci-dessus, les fichiers Javascript suivants sont chargés pour être utilisés dans cet exemple:

EN HTML, incluez les 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

activer les boutons en ajoutant des 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, l'exportation excel produit un fichier corrompu, mais peut être réparé. Vous pouvez également désactiver excel et utiliser csv export.

2
répondu jzhou 2015-12-03 21:02:39