So importieren Sie Excel in Javascript-Front-End-Fragen und Antworten-php.cn

So importieren Sie Excel in Javascript

PHPz

Freigeben： 2023-04-24 09:19:25

Original

2097 Leute haben es durchsucht

Excel ist ein sehr häufig verwendetes Werkzeug bei der Datenverarbeitung, kann aber normalerweise nur auf Computern verwendet werden. Um Excel-Daten in Webseiten zu verwenden und anzuzeigen, können wir Excel-Dateien zur Bedienung und Anzeige in JavaScript importieren. In diesem Artikel wird erläutert, wie Sie Excel in JavaScript importieren.

1. Excel-Datentypen

Zunächst müssen Sie die Datentypen in Excel verstehen. In Excel gibt es folgende Datentypen:

Boolesche Werte: TRUE und FALSE (es können auch 1 und 0 verwendet werden).
Numerischer Wert: jede Zahl, einschließlich Dezimalzahlen und negative Zahlen.
Datum und Uhrzeit: Excel verwendet ein bestimmtes Format, um Datums- und Uhrzeitinformationen anzuzeigen.
String: beliebiger Text, kann Zahlen und Sonderzeichen enthalten.

2. Excel-Dateien in das JSON-Format konvertieren

Die gängigste Methode zum Importieren von Excel-Tabellen in JavaScript ist die Konvertierung der Tabellen in das JSON-Format in JavaScript. Hier ist ein Beispiel einer Excel-Tabelle:

35 e die Excel-Datei in ein Objekt im JSON-Format. Es gibt viele solcher Bibliotheken wie SheetJS und Papa Parse usw. Hier wird SheetJS verwendet. 3. Verwenden Sie die SheetJS-Bibliothek, um Excel in JavaScript zu importieren.Um die SheetJS-Bibliothek zu verwenden, müssen Sie zuerst die relevanten JS-Dateien in die HTML-Datei einfügen:

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

Nach dem Login kopieren

Als nächstes müssen wir Code schreiben, um die Excel-Datei zu konvertieren in das JSON-Format:Zu diesem Zeitpunkt haben wir Excel-Daten erfolgreich in JavaScript importiert und in das JSON-Format konvertiert. Anschließend können die Daten manipuliert und angezeigt werden. 4. Excel-Daten bearbeiten und anzeigenMit Excel-Daten im JSON-Format können wir damit verschiedene Operationen und Anzeigen durchführen. Erstellen Sie beispielsweise eine Tabelle. Hier ist ein einfaches Beispiel: HTML-Code:

Name	Alter	Beruf
John	25	Ingenieur
Mary	30	Lehrer
Mike
<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> Nach dem Login kopieren

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();

Nach dem Login kopieren

JavaScript-Code:

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

Nach dem Login kopieren

Der obige Code fügt Excel-Daten in eine HTML-Tabelle ein.

Darüber hinaus können Sie auch verschiedene JavaScript-Diagrammbibliotheken zur Anzeige von Daten verwenden, wie z. B. HighCharts, D3.js usw.

5. Fazit

Mit der oben genannten Methode können wir Excel-Daten zur Bedienung und Anzeige problemlos in JavaScript importieren. Dadurch wird nicht nur die Effizienz der Datenverarbeitung verbessert, sondern auch eine bessere Darstellung und Interaktion der Daten ermöglicht.

Das obige ist der detaillierte Inhalt vonSo importieren Sie Excel in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!