Obtenez des données d'Excel via HTML : un guide complet

Comment obtenir des données Excel en HTML ? Importez des fichiers Excel : utilisez l'élément Analyser les fichiers Excel : utilisez la bibliothèque xlsx ou la fonctionnalité du navigateur. Obtenir des données : obtenez l'objet de la feuille de calcul, y compris les données de ligne et de colonne. Afficher les données : utilisez des éléments HTML tels que des tableaux pour afficher les données.

Obtention de données à partir d'Excel via HTML : un guide complet

Dans le développement Web moderne, l'obtention de données provenant de diverses sources est cruciale. Une source courante est Microsoft Excel. Obtenir des données d'Excel via HTML peut ajouter beaucoup de valeur à votre application.

Ce guide vous expliquera étape par étape comment obtenir des données à partir d'un fichier Excel en utilisant HTML.

Étape 1 : Importer un fichier Excel

<input type="file" id="excel-file-input">

Ce code créera un élément d'entrée de fichier que l'utilisateur pourra utiliser pour sélectionner le fichier Excel à importer.

Étape 2 : Analyser le fichier Excel

Après avoir importé le fichier, vous devez l'analyser dans un format lisible en HTML. Vous pouvez le faire en utilisant une bibliothèque tierce telle que [xlsx](https://github.com/SheetJS/js-xlsx) ou la fonctionnalité de navigateur intégrée.

Utilisez la bibliothèque xlsx : xlsx 库：

const reader = new FileReader();
reader.onload = function() {
  const data = reader.result;
  const workbook = XLSX.read(data, {type: 'binary'});
};
reader.readAsBinaryString(file);

步骤 3：获取数据

解析文件后，你可以使用 workbook

const cellValue = workbook.Sheets.Sheet1['A1'].v;

Étape 3 : Obtenez les données

Après avoir analysé le fichier, vous pouvez utiliser l'objet workbook pour obtenir les données. Il contient un tableau d'objets de feuille de calcul contenant des données de lignes et de colonnes.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

Étape 4 : Afficher les données en HTML

Après avoir obtenu les données, vous pouvez utiliser des éléments HTML pour les afficher sur la page. Par exemple, vous pouvez utiliser un tableau :

const tableBody = document.querySelector('tbody');
for (const row of data) {
  const newRow = document.createElement('tr');
  const name = document.createElement('td');
  name.innerText = row.name;
  const age = document.createElement('td');
  age.innerText = row.age;
  newRow.appendChild(name);
  newRow.appendChild(age);
  tableBody.appendChild(newRow);
}

rrreee

Exemple pratique :

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!