So erstellen Sie Excel-Berichte durch Front-End- und Back-End-Interaktion

Das Open-Source-Community-Team China machte seine erste Live-Übertragung und erzählte im Namen des Teilens die Geschichte hinter der Open-Source-Community China.“

Vorwort

Excel hat das breiteste Publikum im Office-Bereich und ist mit seinen leistungsstarken Datenverarbeitungs- und Visualisierungsfunktionen zu einem unersetzlichen Werkzeug geworden. Es kann nicht nur Daten klar darstellen, sondern auch Vorgänge wie Datenanalyse, Diagrammerstellung und Datenschwenkung ausführen und bietet Benutzern umfassende Datenanzeige- und Analysefunktionen.

Heute stellt Ihnen der Herausgeber vor, wie Sie eine Excel-Berichtsvorlage implementieren und Daten über die reine Front-End-Tabellensteuerung SpreadJS und die Back-End-Tabellenkomponente GcExcel von Grape City Company eingeben und ausfüllen.

Umweltvorbereitung

Node.js

SpreadJS Online-Formulareditor

Codedatei (kann als Referenz zum Lesen dieses Artikels verwendet werden)

Frontend

Entwerfen Sie eine Excel-Berichtsvorlage

1. Laden Sie die Datenquelle zum Erstellen von Berichten:

Öffnen Sie den SpreadJS-Online-Tabelleneditor . Bevor Sie den gruppierten Bericht entwerfen, müssen Sie Datenvorbereitungsarbeiten durchführen. Klicken Sie auf die Schaltfläche [Datenquelle] auf der Registerkarte [Daten], um eine Datenquelle dafür hinzuzufügen.

Verwenden Sie die Schaltfläche [Tabelle hinzufügen], um jedes Datenquellenobjekt hinzuzufügen (jedes Datenquellenobjekt entspricht einer Tabelle) und den Pfad zum Lesen der Daten zu konfigurieren (der Pfad kann eine Adresse sein, die die Datenquelle im entsprechenden Format anfordert, oder dies kann auch der Fall sein). ein Server sein Die angeforderte Adresse, der Server gibt ein Datenquellenobjekt zurück, das dem Format entspricht.

Der Datenpfad ist ein optionales Feld. Wenn JSON mehrere Datenquellen enthält, können Sie diese durch Festlegen des Datenpfads unterscheiden.

2. Berichtsvorlage hinzufügen:

Klicken Sie nach dem Hinzufügen der Datenquelle auf die Berichtsschaltfläche der Registerkarte [Einfügen], um eine neue Berichtsvorlage einzufügen. Das zuvor hinzugefügte Datenquellenobjekt wird in der Datenquellenliste auf der linken Seite angezeigt.

3. Gruppierte Berichte einrichten:

Durch Ziehen der Felder in der Datenquellenliste auf der linken Seite können Sie schnell eine Berichtsvorlage erstellen, die Felder für Verkaufsgebiet, Provinz, Stadt und Produkttyp gruppiert, um Verkäufe und Gewinne zu zählen, wie in der folgenden Abbildung dargestellt:

4. Speichern Sie die Excel-Vorlage als SJS-Datei

Ändern Sie die Excel-Berichtsvorlage

Nach dem Speichern der Excel-Berichtsvorlage als .sjs-Datei muss der Editor nun einige Zellen in der Excel-Berichtsvorlage in die GcExcel-Vorlagensprache konvertieren. Die spezifischen Vorgänge sind wie folgt:

Platzieren Sie die .sjs-Datei im Stammverzeichnis des SpreadJS-Frontend-Codes

5. Konvertieren Sie die Excel-Vorlage in die GcExcel-Vorlagensyntax

Am Beispiel der Zelle C4 (Provinz) in der Excel-Berichtsvorlage (wie in der Abbildung unten gezeigt) ruft der Editor zunächst die Vorlagen-API-Informationen (die Warteschlangeninformationen in DevTools in der Abbildung unten) über die Methode getBindingPath ab.

Nachdem Sie die API-Informationen erhalten haben, analysieren Sie den Bindungspfad:

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

Analysieren Sie dann den Zusammenführungstyp und die Erweiterungsrichtung:

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

Nachdem diese Informationen integriert und doppelte geschweifte Klammern hinzugefügt wurden, sollte der Inhalt der Zelle C4 in der exportierten Excel-Datei schließlich die folgende GcExcel-Vorlagensyntax haben:

{{ds.销售数据.省份(E=V,G=M)}}

6. Führen Sie das Frontend-Projekt aus und exportieren Sie die Excel-Vorlagendatei

Geben Sie den Befehl [npm install] ein, um Abhängigkeiten herunterzuladen
Geben Sie den Befehl [npm run start] ein, um das Projekt zu starten (wie in der Abbildung unten nach dem Start gezeigt).

Exportieren Sie abschließend die geänderte Vorlage in eine Excel-Datei, wie in der Abbildung unten gezeigt. Sie können sehen, dass die Informationen in der Provinzeinheit an die GcExcel-Vorlagensyntax angepasst wurden.

hinteres Ende

Öffnen Sie den GcExcel-Backend-Code und platzieren Sie die zuvor exportierte Excel-Vorlagendatei im Stammverzeichnis der Codedatei. Beim letzten Hauptfunktionslauf können die Daten in die Excel-Vorlagendatei übertragen werden, und schließlich wird ein Excel-Bericht mit Daten generiert.

Abschluss

Das Obige ist der gesamte Prozess zur Verwendung von SpreadJS+GcExcel zum Erstellen eines Excel-Berichts. Wenn Sie weitere Informationen erhalten möchten, klicken Sie bitte hier, um diese anzuzeigen.

Erweiterungslink:

[Trockene Informationssendung] Lesen Sie alle wichtigen Punkte der Bilanzanalyse in einem Artikel!

Warum sind Ihre Finanzberichte nicht großartig? Es wird empfohlen, dass Sie diese vier Designpunkte verstehen und!

Analyse von Anwendungsszenarien der reinen Frontend-Excel-Tabellensteuerung im Bereich der Berichtsanalyse

So erstellen Sie Excel-Berichte durch Front-End- und Back-End-Interaktion

Ich denke du magst