Comment convertir un tableau Web en Excel à l'aide de Javascript

Avec l'utilisation généralisée des feuilles de calcul dans la gestion d'entreprise et l'analyse des données, la demande de conversion de tableaux Web au format Excel augmente également. La fonction puissante et les caractéristiques multiplateformes de JavaScript en font le meilleur choix pour implémenter cette fonction. Voici une méthode pour utiliser JavaScript pour convertir des tableaux Web en Excel.

1.Introduire la bibliothèque JavaScript

Vous devez d'abord introduire les bibliothèques JavaScript nécessaires - SheetJS et FileSaver. SheetJS est une puissante bibliothèque de traitement de feuilles de calcul capable de lire et d'écrire Excel, CSV et d'autres formats de feuilles de calcul. La bibliothèque FileSaver fournit un moyen simple de sauvegarder les données HTML ou binaires générées à partir du navigateur. Ajoutez le code suivant au fichier HTML pour présenter ces deux bibliothèques.

<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

2. Créer du code HTML de tableau

Ensuite, vous devez créer un tableau dans la page HTML pour afficher les données. Ici, nous créons un tableau simple avec en-tête et données.

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>40</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

3. Écrivez du code JavaScript

Maintenant, nous commençons à écrire du code JavaScript pour implémenter la fonction de conversion de tableaux en Excel.

Vous devez d'abord obtenir la table, utilisez la méthode document.getElementById() pour obtenir l'élément de table avec l'identifiant "table".

const table = document.getElementById('table');

Ensuite, obtenez le nombre de lignes et de colonnes dans le tableau via table.rows et créez un tableau vide pour enregistrer les données du tableau.

const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

Ensuite, vous devez parcourir toutes les lignes et colonnes du tableau et stocker les données de texte de la cellule dans le tableau de données. Ceci est réalisé à l'aide d'une double boucle.

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

Enfin, utilisez la bibliothèque SheetJS pour convertir les données en données binaires au format Excel, et utilisez la bibliothèque FileSaver pour les enregistrer localement. Ceci est implémenté à l'aide de la méthode XLSX.writeFile() de SheetJS.

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

Le code JavaScript complet est le suivant :

const table = document.getElementById('table');
const rowLength = table.rows.length;
const colLength = table.rows[0].cells.length;
const data = [];

for (let i = 0; i < rowLength; i++) {
  const rowData = [];
  for (let j = 0; j < colLength; j++) {
    rowData.push(table.rows[i].cells[j].textContent);
  }
  data.push(rowData);
}

const wb = XLSX.utils.book_new();
const ws = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'table.xlsx');

4. Testez le résultat de la conversion

Après avoir terminé les étapes ci-dessus, ouvrez le fichier HTML dans le navigateur et cliquez sur le bouton, un fichier Excel nommé "table.xlsx" apparaîtra. être automatiquement téléchargé.

Grâce aux étapes ci-dessus, nous avons réussi à convertir le tableau Web au format Excel. Cette méthode est basée sur JavaScript, simple à mettre en œuvre, très efficace et peut être multiplateforme. Elle est très adaptée au traitement par lots de formulaires Web. C'est sans aucun doute un bon outil pour les chefs d'entreprise et les analystes de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!