Comment importer Excel en javascript

Excel est un outil très couramment utilisé lors du traitement de données, mais il ne peut généralement être utilisé que sur des ordinateurs. Afin d'utiliser et d'afficher des données Excel dans des pages Web, nous pouvons importer des fichiers Excel en JavaScript pour le fonctionnement et l'affichage. Cet article explique comment importer Excel dans JavaScript.

1. Types de données Excel

Tout d'abord, vous devez comprendre les types de données dans Excel. Il existe les types de données suivants dans Excel :

1. Valeurs booléennes : VRAI et FAUX (1 et 0 peuvent également être utilisés).
2. Valeur numérique : n'importe quel nombre, y compris les décimales et les nombres négatifs.
3. Date et heure : Excel utilise un format spécifique pour afficher les informations de date et d'heure.
4. Chaîne : n'importe quel texte, peut inclure des chiffres et des caractères spéciaux.

2. Convertir des fichiers Excel au format JSON

Le moyen le plus courant d'importer des tableaux Excel en JavaScript est de convertir les tableaux au format JSON en JavaScript. Voici un exemple de tableau Excel :

Nom	Âge	Occupation
Jean	25	Ingénieur
Mary	30	Professeur
Mike	35	Lawyer
Lisa	40	Doctor

Convertissez le tableau ci-dessus au format JSON, le code est le suivant :

[
  {"姓名": "John", "年龄": 25, "职业": "工程师"},
  {"姓名": "Mary", "年龄": 30, "职业": "教师"},
  {"姓名": "Mike", "年龄": 35, "职业": "律师"},
  {"姓名": "Lisa", "年龄": 40, "职业": "医生"}
]

Par conséquent, nous devons utiliser une bibliothèque pour analyser le Fichier Excel dans un objet au format JSON. Il existe de nombreuses bibliothèques de ce type telles que SheetJS et Papa Parse, etc. SheetJS sera utilisé ici.

3. Utilisez la bibliothèque SheetJS pour importer Excel dans JavaScript

Pour utiliser la bibliothèque SheetJS, vous devez d'abord introduire les fichiers JS pertinents dans le fichier HTML :

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

Ensuite, nous devons écrire du code pour convertir le fichier Excel. au format JSON :

var oReq = new XMLHttpRequest();
oReq.open("GET", "data.xlsx", true);  // data.xlsx为Excel文件名
oReq.responseType = "arraybuffer";  // 二进制数据流
oReq.onload = function(e) {
  var arraybuffer = oReq.response;
  var data = new Uint8Array(arraybuffer);
  var workbook = XLSX.read(data,{type:"array"});  // 读取Excel文件
  var first_sheet_name = workbook.SheetNames[0];  // 获取第一个sheet的名称
  var worksheet = workbook.Sheets[first_sheet_name];  // 获取第一个sheet对象
  var result = XLSX.utils.sheet_to_json(worksheet);  // 将sheet对象转换为JSON格式
};
oReq.send();

À ce stade, nous avons réussi à importer des données Excel en JavaScript et à les convertir au format JSON. Ensuite, les données peuvent être manipulées et affichées.

4. Manipuler et afficher des données Excel

Avec les données Excel au format JSON, nous pouvons les utiliser pour effectuer diverses opérations et affichages. Par exemple, créez un tableau. Voici un exemple simple :

Code HTML :

<table id="excel_table" border="1"></table>

Code JavaScript :

var table = document.getElementById('excel_table');
for (var i = 0; i < result.length; i++) {
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = result[i].姓名;
  cell2.innerHTML = result[i].年龄;
  cell3.innerHTML = result[i].职业;
}

Le code ci-dessus insère des données Excel dans un tableau HTML.

De plus, vous pouvez également utiliser diverses bibliothèques de graphiques JavaScript pour afficher des données, telles que HighCharts, D3.js, etc.

5. Conclusion

Grâce à la méthode ci-dessus, nous pouvons facilement importer des données Excel dans JavaScript pour les utiliser et les afficher. Cela améliore non seulement l’efficacité du traitement des données, mais permet également une meilleure présentation et interaction 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!