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 3525558f8f338d4ea90ebf22e5cde2bc pour permettre à l'utilisateur de sélectionner un fichier Excel. a2dc5349fb8bb852eaec4b6390c03b14 元素，允许用户选择一个 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().

🎜🎜🎜Conclusion🎜🎜🎜En intégrant des données Excel dans HTML, nous pouvons créer des tableaux de bord et des graphiques puissants et interactifs. Cet article décrit comment utiliser JavaScript pour lire des données Excel et propose un cas pratique pour illustrer son application. La maîtrise de ces techniques peut grandement améliorer l’efficacité de l’analyse et de la visualisation des 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!