Reine Front-End-JavaScript-Implementierung von Excel IO-Fallfreigabe

Autor：Eve Cole Aktualisierungszeit：2025-08-02 03:16:01

Das Unternehmen möchte kürzlich ein ** Statistik- und Managementsystem für ein staatliches Unternehmen erstellen.

Spezifische Anforderungen umfassen

• Excel -Import und Exportieren

• Berichte basierend auf importierten Daten anzeigen

• Diagrammanzeige (einschließlich Balkendiagramme, Zeilendiagramme, Kreisdiagramme) und erfordert auch Animationseffekte und flacher Stil

• Excel -Exportieren und bieten Kunden die Verwaltung von Excel -Dateien zur Verfügung

• ...

Es gibt so viele Anforderungen!

Jetzt ist es endlich fertig, also habe ich meine Erfahrung analysiert.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

In der gesamten Projektarchitektur ist das erste, was Sie tun müssen, das Problem des Excel -Imports zu lösen.

Da das Unternehmen keinen eigenen Rahmen für Excel IO hat, kann es nur andere Kanäle durchlaufen.

Nun, ich habe einen Open -Source -Bibliothek XLSX auf GitHub gefunden, um sie über NPM zu installieren.

NPM Installieren Sie XLSX -SAVE

Fügen Sie danach einen Verweis auf die JS -Datei in Ihrer HTML -Datei hinzu

Laden Sie Daten als binäre Zeichenfolge über das FileReader -Objekt in den Speicher.

 target.adDeVentListener ('Drop', Funktion (e) {e.preventDefault (); Handledrop (e.datatransfer.files [0]);}); HandleDrop = function () {var reader = new FileReader (); Reader.onload = Funktion (e) {var data = e.target.Result; ... ...}; Reader.readasBinaryString (f);}

Dann werden wir die Bibliothek verwenden, um die Datendaten zu betreiben.

Es enthüllt ein Objekt XLSX und die Daten können als JSON -Objekt über die Read () -Methode von XLSX gelesen werden.

 var Workbook = xlsx.read (Daten, {Typ: 'Binary'}); var Sheetname = Workbook.SheetNames [0]; var Sheet = Workbook.Sheets [SheetName];

Verwenden Sie danach das Schlüsselwertpaar, um die Daten aus dem Blatt zu nehmen und es in die Tabelle zu stecken.

 var table = document.createelement ('table'); for (var row = 1;; Zeile ++) {if (Sheet ['a'+row] == null) {break; } var tr = document.createelement ('tr'); für (var col = 65; col <= 90; col ++) {var c = string.fromCharCode (col); // 'a', 'b', 'c' ... var key = ' + c + row; if (Blatt [Schlüssel] == NULL) {Break; } var td = document.createelement ('td'); td.innerhtml = Blatt [Schlüssel] ['W']; Tr.Appendchild (TD); } table.AppendChild (tr);} document.querySelector ('#target'). appendChild (Tabelle);

Hier ist der vollständige Code:

index.html

 <! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> document </title> <style> #target {Höhe: 400px; Breite: 700px; Hintergrundfarbe: #f8f8f8; Rand: 200px Auto; Überlauf: versteckt; Border-Radius: 5px; Box-Shadow: 2px 2px 5px #888; } .hover :: vor {Inhalt: 'Bitte ziehen Sie die Excel -Datei hier'; Breite: 100%; Höhe: 100%; Anzeige: Block; Text-Align: Mitte; Zeilenhöhe: 400px; Schriftgröße: 24px; Schriftfamilie: 'Microsoft Yahei'; } #target> Tabelle {Höhe: 250px; Breite: 400px; Grenze: 1PX Solid #CCC; Border-Radius: 3px; Rand: 75px Auto; } #target> Tabelle TD {text-align: center; Border-Top: 1PX Solid #CCC; Border-Links: 1PX Solid #CCC; } #target> table tr: First-Child> td {Border-Top: 0px Solid #ccc; } #target> table tr> td: First-Child {Border-Links: 0px Solid #ccc; } </style> </head> <body> <div id = "target"> </div> <script src = "./ node_modules/xlsx/dist/jszip.js"> </script> <script src = "./ node_modules/xlsx/dist/xlsx.js" src = "index.js"> </script> </body> </html>

Unten finden Sie den vollständigen JS -Code

index.js

 window.addeventListener ('load', function () {var target = document.querySelector ('#target'); target target.adDeVentListener ('dragover', function (e) {this.classlist.remove ('hover'); E.PreventDefault ();}); var handledrop = function (f) {var reader = new FileReader (), name = f.name; reader.onload = function (e) {var data = e.target.result, Workbook = xlsx.read (Daten, {Typ: 'Binary'}), SheetName = Workbook.SheetNames [0], Sheet = Workbook.Sheets [SheetName], table = document.creeelement ('table'); für (var row = 1;; row ++) {if (Sheet ['a'+row] == null) {break; } var tr = document.createelement ('tr'); für (var col = 65; col <= 90; col ++) {var c = string.fromCharCode (col); // 'a', 'b', 'c' ... var key = ' + c + row; if (Blatt [Schlüssel] == NULL) {Break; } var td = document.createelement ('td'); td.innerhtml = Blatt [Schlüssel] ['W']; Tr.Appendchild (TD); } table.AppendChild (tr); } document.querySelector ('#target'). appendChild (Tabelle); }; Reader.readasBinaryString (f);}

Die Effekte sind wie folgt:

Dies scheint zu funktionieren, aber wir haben sehr schnell aufgegeben.

Es gibt zu viele Nachteile .

• Diese Bibliothek befindet sich noch in der Entwicklungsphase, und es gibt immer noch viele Fehler in Problemen, die aufgeworfen wurden. Es gibt keine Möglichkeit, die Stabilität der endgültigen Website zu gewährleisten.

• Diese Bibliothek hat keine Möglichkeit, Daten aus fusionierten Zellen zu importieren. Sie kann nur strenge Daten nach "A", "B", "C" ... und 1, 2, 3 Koordinaten abfragen, und es erfordert, dass die internen Zellen nicht leer sein können.

• Was unbequemer ist, ist, dass es nicht die Zähleigenschaften von Zeilen und Spalten hat.

• Da dies für staatseigene Unternehmen geschieht, ist es unmöglich, sich mit nicht vielen Sternen auf Bibliotheken zu verlassen. Die Reduzierung der Risiken ist auch die Sicherheit der Website.

• ...

Nach einer Gruppendiskussion beschlossen wir, eine andere Front-End-Kontrolle namens Wijmo zu verwenden.

Laden Sie zunächst das WIJMO -Paket von der Website herunter. Diese Kontrolle liefert keine NPM- und Bower -Methoden.

Importieren Sie dann das Paket, das ich brauche

 <script src = "./ wijmo/dist/controls/wijmo.min.js"> </script> <script src = "./ wijmo/dist/steuert/wijmo.grid.min.js"> </script> <script src = "./ wijmo/dist/controls/wijmo.grid.detail.min.js"> </script> <script src = "./ wijmo/dist/controls/wijmo.xlsx.min.js"> </script>

Darüber hinaus gibt es auch ein JSZIP -Paket, bei dem es sich um eine Bibliothek handelt, in der JS das komprimierte Paket dekomprimiert wird. (Aufgrund der offenen XML -Technologie von MS kann die XLSX -Datei in eine XML -Datei dekomprimiert werden, und die App.xml enthält die Hauptdaten).

Der Betrieb von Lesedateien ist der gleiche wie oben

 var handledrop = function (file) {var reader, Arbeitsbuch; if (Datei) {reader = new FileReader; reader.onload = function (e) {workbook = new Wijmo.xlsx.workbook (), Workbook.load (reader.result); }; Reader.ReadasDataurl (Datei); }}

passieren

Workbook = new Wijmo.xlsx.workbook ();

workbook.load (reader.result);

Diese beiden Codezeilen laden die Excel -Datei in das Arbeitsbuchobjekt im Speicher.

Drucken Arbeitsbuchobjekt

Drucken Dieses Objekt zeigt, dass das Arbeitsbuch das Blattarray enthält, jedes Blatt das Zeilenarray, jede Zeile das Zellarray enthält und das Vaule -Attribut in jeder Zelle der Wert der Zelle ist.

Das ist einfach zu gut

Die folgenden implementiert eine Funktion getCollectionView, um Daten in einem Array von Objekten zu erhalten

 var getCollectionView = Funktion (Arbeitsbuch) {var collectionView = []; if (Workbook) {var Sheet = Workbook.sheets [0], Header = []; // Spalten -Header -Array für (var i = 0, länge = blatt für (var j = 0, jLength = row.cells.length; j <jLength; j ++) {var cell = row.cells [j]; // Wenn es sich um die erste Datenreihe handelt, erscheint es als Spaltentitel und füllt sie in das Titelarray if (i === 0) {Header.push (cell.Value); } else {// Das folgende Zeilenarray wird als Attribut des Rowarray -Objekts gespeichert, und der Attributname ist der Titel der Spalte. rowarray [header [j]] = cell.Value; }} if (i! == 0) {collectionView.push (rowarray); }}} return CollectionView;}

Anschließend muss eine Tabelle verwendet werden, um die Daten zu präsentieren. Hier verwende ich direkt die FlexGrid -Tabelle von Wijmo.

 griddiv = document.createelement ('div'); griddiv.classlist.add ('grid'); datagrid = new Wijmo.grid.flexgrid (Griddiv); // Erstellen Sie eine FlexGrid -Form, indem Sie in den Container weitergeben. var collectionView = new Wijmo.collections.CollectionView (getCollectionView (Arbeitsbuch)); DataGrid.ItemSource = CollectionView;

OK, nach den obigen Schritten wurde das Importieren von Excel in die Tabelle implementiert

Hier ist der vollständige JS -Code:

index.js

 (function () {var datagrid = null, griddiv = null, workbook = null; window.adDeVentListener ('load', function () {griddiv = document.createelement ('div'); document.querySelector ('#target'); target.adDeVentListener ('Dragover', Funktion (e) {e.preventDefault (); this.AppendChild (GridDiv); WijMO.Collection.CollectionView (GetCollectionView (Arbeitsbuch)); Workbook.Sheets [0]; Header.push (Cell.Value);

Hier ist der Effekt

Excel Export

Es ist schon Euro

Zwei Code -Sätze zur Implementierung der Excel -Exportfunktion

wijmo.grid.xlsx.flexgridxlsxconverter.save (DataGrid,

{includeColumnHeaders: true}, Dateiname);

Diese Tabelle unterstützt auch Filterung, Gruppierung, Filterung, Bearbeitung.

Flächendiagramm und Balkendiagramm

Kurz nach Abschluss von Excel IO stellte ich fest, dass dieses Steuerungspaket auch Flächendiagramme, Balkendiagramme und viele andere Arten von Grafiken erstellen kann.

Hier werde ich also ein Beispiel für ein Flächendiagramm und ein Balkendiagramm demonstrieren.

Bringen Sie zuerst die Tasche ein.

Nach dem folgenden Code können Sie dann ein Balkendiagramm in die Seite einfügen, indem Sie es einfügen

 chart = new wijmo.chart.flexchart ('#chart'); chart.initialize ({itemsSource: collectionView, bindingx: 'name', option: {gruppewidth: 15}, Serie: [{name: 'ay', binding: 'ast'},]});

Siehe den folgenden Effekt

Unter ihnen kann die Farbe und die Form des Balkendiagramms eingestellt werden. Wenn sich die Maus zum Element bewegt, gibt es eine kleine Eingabeaufforderung.

Hier müssen Sie nur die Art des Diagramms ändern und können auf andere Arten von Diagrammen wechseln

 chart.chartType = chart.chartType === wijmo.chart.chartType.column? wijmo.chart.chartType.area: wijmo.chart.chartType.column;

Der Code zu diesem Artikel wurde http://xiazai.vevb.com/201608/yuanma/js-xlswijmo-io(vevb.com).rar hochgeladen

Es wird später nach Github gehostet.

Am Ende wurde die Aufgabe relativ schnell erledigt.

Dies ist die kurze Einführung in Excel IO dieses Projekts. Dieses Projekt wurde jetzt abgeschlossen und einige andere technische Details werden in Zukunft weitergegeben.

Hoffe es kann dir helfen.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.