web-dev-qa-db-fra.com

exporter une table HTML en CSV

J'essaie d'ajouter une fonctionnalité d'option de téléchargement CSV sur mon site Web. Il convient de convertir la table html présente sur le site Web en contenu csv et de la rendre téléchargeable. J'ai cherché sur Internet un bon plugin et en ai trouvé quelques-uns comme http://www.dev-skills.com/export-html-table-to-csv-file/ Mais il utilise un script php 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 des logiciels côté serveur tels que node.js sans l'utilisation de php?

javascriptjquerynode.jshtml-tableexport-to-csv
38
sam

En utilisant uniquement jQuery et Vanilla Javascript:

export-to-html-table-as-csv-file-using-jquery

Placez ce code dans un script à charger dans la section head:

 $(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);
        });
    });
})

Remarques:

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

Le sélecteur table est utilisé à titre d'exemple et peut être ajusté en fonction de vos besoins.

Cela ne fonctionne que dans les navigateurs avec un support complet de Data URI: Firefox, Chrome et Opera, pas dans IE, qui ne supporte que Data URIs pour l'intégration de données d'images binaires dans une page.

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

33
melancia

Il existe une solution très simple, gratuite et à source ouverte, à http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-Excel-csv.html

Commencez par télécharger le fichier javascript et des exemples de fichiers à partir de https://github.com/jmaister/excellentexport/releases/tag/v1.4

La page html ressemble à celle ci-dessous. 

Assurez-vous que le fichier javascript est dans le même dossier ou modifiez le chemin 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>

C'est très facile à utiliser car j'ai essayé la plupart des autres méthodes.

10
Buddhika Ariyaratne

Vous n'avez pas besoin du script PHP côté serveur. Faites cela uniquement du côté client, dans les navigateurs acceptant URI de données :

data:application/csv;charset=utf-8,content_encoded_as_url

L'URI de données sera quelque chose comme:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

Vous pouvez appeler cet URI par:

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

Pour tester, copiez simplement les URI ci-dessus et collez-les dans la barre d'adresse de votre navigateur. Ou testez 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, en obtenant 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);
6
Italo Borssatto

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

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

En plus du code ci-dessus, les fichiers de bibliothèque 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

Activez les boutons en ajoutant des scripts tels que:

<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 génère un fichier corrompu, mais peut être réparé. Sinon, désactivez Excel et utilisez l'exportation csv.

2
jzhou

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

J'ai utilisé la fonction suivante et importé dans mon fichierREACToù je devais télécharger le fichier csv. 

J'avais une balise span dans mes éléments th. Ajout de commentaires à ce que font 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 clique sur exporter vers le format csv, il déclenche la fonction suivante dans réagit.

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

Exemple de table 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>
0
Roger Perez