Interaction HTML et Excel : explication détaillée de la lecture des données

Comment lire des données Excel en HTML : utilisez l'API JavaScript FileReader pour charger des fichiers Excel dans FileReader. Convertissez le contenu d'un fichier Excel en chaîne binaire. Utilisez la bibliothèque XLSX pour analyser la chaîne binaire afin d'obtenir les données de la première feuille de calcul. Stockez les données de la feuille de calcul dans un tableau JavaScript. Utilisez JavaScript pour créer un tableau et afficher les données d'un tableau.

Interaction entre HTML et Excel : Explication détaillée de la lecture des données

Introduction

L'interaction entre HTML et Excel peut grandement améliorer l'efficacité de l'analyse et de la visualisation des données. En intégrant des données Excel dans des pages HTML, nous pouvons créer des tableaux de bord et des graphiques dynamiques et interactifs. Cet article présentera comment lire des données Excel en HTML et fournira un cas pratique pour illustrer son application.

Lire des données Excel via JavaScript

L'extrait de code suivant montre comment lire des données Excel à l'aide de JavaScript :

function readExcelData(file) {
  // 将 Excel 文件加载到 FileReader 中
  var reader = new FileReader();
  reader.onload = function() {
    // 将 Excel 文件的内容转换为二进制字符串
    var data = reader.result;

    // 使用 XLSX 库解析二进制字符串
    var workbook = XLSX.read(data, {type: 'binary'});

    // 获取第一个工作表中的数据
    var worksheet = workbook.Sheets[workbook.SheetNames[0]];

    // 将工作表中所有数据存储在 JavaScript 数组中
    var dataArray = XLSX.utils.sheet_to_json(worksheet);

    // 将 JavaScript 数组中的数据显示在页面上
    displayData(dataArray);
  };
  reader.readAsBinaryString(file);
}

function displayData(data) {
  // 在页面上创建一个表格来显示数据
  var table = document.createElement('table');

  // 遍历数据并将其添加到表中
  for (var i = 0; i < data.length; i++) {
    var row = table.insertRow();
    for (var key in data[i]) {
      var cell = row.insertCell();
      cell.innerHTML = data[i][key];
    }
  }

  // 将表格添加到文档中
  document.body.appendChild(table);
}

Un cas pratique

Ce qui suit est un cas pratique qui montre comment utiliser HTML et JavaScript pour lire Données Excel à partir d'un fichier Excel Lire les données dans :

1. Créez un fichier HTML et référencez la bibliothèque XLSX.
2. Ajoutez un élément <input type="file"> pour permettre à l'utilisateur de sélectionner un fichier Excel. <input type="file"> 元素，允许用户选择一个 Excel 文件。
3. 添加一个按钮元素，当用户单击时触发 readExcelData() 函数。
4. 在 readExcelData() 函数中，使用 JavaScript FileReader API 读取 Excel 文件并将其转换为二进制字符串。
5. 使用 XLSX 库解析二进制字符串并获取第一个工作表中的数据。
6. 将工作表数据存储在 JavaScript 数组中，然后使用 displayData()
Ajoutez un élément bouton qui déclenche la fonction readExcelData() lorsque l'utilisateur clique dessus.

Dans la fonction readExcelData(), utilisez l'API JavaScript FileReader pour lire le fichier Excel et le convertir en chaîne binaire. Utilisez la bibliothèque XLSX pour analyser la chaîne binaire et obtenir les données dans la première feuille de calcul.

Stockez les données de la feuille de calcul dans un tableau JavaScript, puis affichez-les dans une page HTML à l'aide de la fonction displayData().

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!