Exporter un tableau HTML vers CSV en utilisant le javascript vanille

Question

J'essaie d'ajouter une option de téléchargement csv à mon site web. Elle doit convertir le tableau html présent sur le site en contenu csv et le rendre téléchargeable. J'ai cherché sur internet un bon plugin et j'en ai trouvé quelques uns d'utiles comme http://www.dev-skills.com/export-html-table-to-csv-file/ Mais il utilise php script pour effectuer le téléchargement. Je me demandais s'il existait une bibliothèque purement javascript disponible pour réaliser cette fonctionnalité en utilisant des logiciels côté serveur comme node.js sans utiliser php ?

Answer 1

Doit fonctionner sur tous les navigateurs modernes et sans jQuery ni aucune dépendance, voici mon implémentation :

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ',') {
    // 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(separator));
    }
    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);
}

Ajoutez ensuite votre bouton/lien de téléchargement :

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

Le fichier CSV est horodaté et compatible avec le format Excel par défaut.

Mise à jour après les commentaires : Ajout d'un second paramètre "separator", il peut être utilisé pour configurer un autre caractère comme ; C'est utile si vous avez des utilisateurs qui téléchargent votre csv dans différentes régions du monde car ils peuvent utiliser un autre séparateur par défaut pour Excel, pour plus d'informations voir : https://superuser.com/a/606274/908273

Answer 2

En utilisant seulement jQuery , vanille Javascript et le table2CSV bibliothèque :

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

Placez ce code dans un script qui sera chargé dans le fichier 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 :

Exigences jQuery y table2CSV : Ajouter les références script aux deux bibliothèques avant le script ci-dessus.

En table est utilisé à titre d'exemple et peut être adapté à vos besoins.

Il ne fonctionne que dans les navigateurs dotés d'une Data URI le soutien : Firefox, Chrome et Opera, mais pas dans IE, qui ne prend en charge que le Data URIs pour intégrer des données d'images binaires dans une page.

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

Answer 3

Il existe une solution gratuite et open source très facile à mettre en œuvre à l'adresse suivante http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html

Téléchargez d'abord le fichier javascript et les fichiers d'exemple à partir de https://github.com/jmaister/excellentexport/releases/tag/v1.4

La page html se présente comme suit.

Assurez-vous que le fichier javascript se trouve 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>

Il est très facile de l'utiliser car j'ai essayé la plupart des autres méthodes.

Answer 4

Vous n'avez pas besoin de PHP script côté serveur. Faites-le du côté client uniquement, dans les navigateurs qui acceptent le format URI de données :

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

L'URI des 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 le réglage de la window.location
• ou par la référence d'une ancre
• en ajoutant l'attribut download cela fonctionnera dans chrome, je dois encore tester dans IE.

Pour tester, il suffit de copier les URI ci-dessus et de les coller 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 récupérant les valeurs du tableau, vous pouvez utiliser table2CSV mentionnée par MelanciaUK et le faire :

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

Answer 5

(1) Il s'agit de la solution javascript native pour ce problème. Elle fonctionne sur la plupart des navigateurs modernes.

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = document.querySelectorAll("table tr");
  for (const row of rows) {
    const rowData = [];
    for (const [index, column] of row.querySelectorAll("th, td").entries()) {
      // To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
      if ((index + 1) % 3 === 0) {
        rowData.push('"' + column.innerText + '"');
      } else {
        rowData.push(column.innerText);
      }
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #aaa;
  padding: 0.5rem;
  text-align: left;
}

td {
  font-size: 0.875rem;
}

.btn-group {
  padding: 1rem 0;
}

button {
  background-color: #fff;
  border: 1px solid #000;
  margin-top: 0.5rem;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Author</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jQuery</td>
      <td>John Resig</td>
      <td>The Write Less, Do More, JavaScript Library.</td>
    </tr>
    <tr>
      <td>React</td>
      <td>Jordan Walke</td>
      <td>React makes it painless to create interactive UIs.</td>
    </tr>
    <tr>
      <td>Vue.js</td>
      <td>Yuxi You</td>
      <td>The Progressive JavaScript Framework.</td>
    </tr>
  </tbody>
</table>

<div class="btn-group">
  <button onclick="export2csv()">csv</button>
</div>

(2) Si vous voulez une bibliothèque purement javascript, FileSaver.js pourrait vous aider à sauvegarder les extraits de code pour déclencher le téléchargement des fichiers. Par ailleurs, FileSaver.js n'est pas responsable de la construction du contenu à exporter. Vous devez construire vous-même le contenu dans le format que vous souhaitez.