Neulinge müssen sehen! Erfahren Sie, wie Sie das Browser-Formular-Plug-in verwenden (unten).

Zusammenfassung: Dieser Artikel wurde ursprünglich vom technischen Team von Grape City im Bloggarten erstellt und veröffentlicht. Bitte geben Sie die Quelle des Nachdrucks an: Offizielle Website von Grape City . Grape City bietet Entwicklern professionelle Entwicklungstools, Lösungen und Dienste, um Entwickler zu unterstützen.

Vorwort | Problemhintergrund

Als hervorragendes Arbeitsmittel ist Excel eine unverzichtbare Bürosoftware, mit der jeder arbeiten kann. Mit dem Aufkommen des Internetzeitalters haben immer mehr Unternehmen begonnen, verschiedene B/S-Systeme zur Verarbeitung tabellarischer Datendateien zu nutzen. Gibt es also ein Excel-Add-In, mit dem man Daten direkt im Browser verarbeiten kann? Die Antwort ist ja. Der Herausgeber dieses Artikels stellt vor, wie das Online-Tabellen-Plug-In (im Folgenden als „SpreadJS“ bezeichnet) und der Online-Tabellen-Editor (Excel-ähnliches Browser-Plug-In) in das Vue-Framework integriert werden, um das Excel-Plug-In zu verwenden im Browser, um Daten zu verarbeiten.

In diesem Tutorial verwenden wir node.js. Bitte stellen Sie sicher, dass die neueste Version installiert ist. Darüber hinaus müssen Sie die Software Visual Studio Code (im Folgenden als „VSCode“ bezeichnet) als Programmierumgebung verwenden. Bitte führen Sie sie als aus ein Administrator.

Im vorherigen Artikel ( „Muss für Neulinge gelesen werden! Erfahren Sie, wie Sie das Browser-Tabellen-Plug-In verwenden (Teil 1)“ ) stellte der Herausgeber vor, wie das Tabellen-Plug-In (SpreadJS) in das Vue-Framework integriert wird. Dieses Kapitel Ich werde weiterhin die Integration des Online-Formulareditors in Vue vorstellen.

So integrieren Sie den Online-Formulareditor (Designer) in das Vue-Framework

Online-Formulareditor in Vue integrieren:

In diesem Abschnitt stellt der Herausgeber vor, wie der Online-Formulareditor in das Vue-Framework integriert wird und wie der Editor zum Implementieren der Formulardatenbindung verwendet wird.

Der in Vue integrierte Online-Tabelleneditor ähnelt SpreadJS. Stellen Sie zunächst die Ressourcen ein, die in Vue integriert werden müssen, und legen Sie dann mit dem styleInfo-Tag und designerInitialized die Größe der Tabelle fest (die Methode ist dieselbe wie bei der in Vue integrierten SpreadJS). Weitere Informationen finden Sie im ersten Artikel .

import {
    
    defineComponent} from "Vue"

// SpreadJS核心资源

import GC from "@grapecity/spread-sheets"

// 形状资源

import "@grapecity/spread-sheets-shapes"

// 二维码资源

import "@grapecity/spread-sheets-barcode"

// 图表资源

import "@grapecity/spread-sheets-charts"

// 文件IO相关资源

import "@grapecity/spread-excelio"

// 打印资源 打印资源要在pdf之前

import "@grapecity/spread-sheets-print"

// 导出pdf相关资源

import "@grapecity/spread-sheets-pdf"

// 透视表相关资源

import "@grapecity/spread-sheets-pivot-addon"

// 集算表相关资源

import "@grapecity/spread-sheets-tablesheet"

// 组件运行时样式信息

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

// 组件运行时语言资源

import "@grapecity/spread-sheets-resources-zh"

// 设计器资源，设计器资源要在设计器核心资源之前

import "@grapecity/spread-sheets-designer-resources-cn"

// 设计器核心资源

import \* as GcDesigner from "@grapecity/spread-sheets-designer"

// 设计器css

import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"

// 设计器对Vue的支持资源

import Designer from "@grapecity/spread-sheets-designer-Vue"

import {
    
    bindFile} from "../files/bindFile"

import {
    
    bindSchema,generateData} from "../files/bindTree.js"

                             （Vue引入在线表格编辑器的资源）

Datenbindung implementieren:

Um die Datenbindung anschaulicher und spezifischer zu beschreiben, wird der Herausgeber anhand eines einfachen Falls vorstellen, wie die Datenbindung in SpreadJS implementiert wird.

Realisierungsanforderungen: Implementieren Sie eine einfache Datentabelle der Apple-Verkäufe über SpreadJS. Die Daten in der Datentabelle können über die Datendatei in die Datentabelle übertragen werden. Im Folgenden sind die spezifischen Schritte der Implementierungsmethode aufgeführt:

(1) Design-Visualisierungstabelle:

Verwenden Sie den Tabellen-Designer von spreaeJs, um eine Tabelle zu ziehen und zu entwerfen, wie in der folgenden Abbildung gezeigt (die Methode zum Erstellen einer Tabelle ist dieselbe wie in Excel und wird nicht im Detail beschrieben).

								      （初始化一个Excel表格）

Zusätzlich zur SpreadJS-Visualisierungsmethode zum Erstellen von Tabellen stellt der Herausgeber eine weitere Methode zur Verwendung von Datendateien zum Erstellen von Tabellen vor:

Die bereitgestellte Quellcoderessource enthält zwei Datendateien bindFile.js und bindTree.js, und die Datei bindFile.js ist das Json-Dateiformat der obigen Tabelle, und die Datei bindFile.js kann mithilfe der Datei spread.fromJSON(bindFile )-Methode und zeigen Sie sie auf der Seite an.

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {
    
    

// 加载文件（第一步）

spread.fromJSON(bindFile)

}

								（读取bindFile.js文件的代码）

(2) Erstellen Sie ein Arbeitsblatt:

Erstellen Sie nach dem Entwurf der visuellen Tabelle eine Datentabelle zum Speichern von Daten. Das Erstellen eines Arbeitsblatts kann auch in ein Arbeitsblatt für die visuelle Erstellung und ein Arbeitsblatt für die Implementierung von Datendateien unterteilt werden. Da die Bedienung des Arbeitsblatts für visuelles Design relativ einfach ist, werde ich sie nicht vorstellen ausführlich hier. Im Folgenden wird hauptsächlich die Implementierung der Datentabelle durch Code vorgestellt: Verwenden Sie die setData-Methode des Designers, um das bindSchema (Json-Format der Datentabelle) in der Datei bindTree.js zu lesen und in die SpreadJS-Seite zu laden.

// Der zweite Schritt besteht darin, die Informationen der Datenbindungstabelle zu binden (laden Sie nach der Initialisierung des Designers den richtigen Baum).

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

(Implementieren Sie den Code, um das Arbeitsblatt zu erstellen)

(3) Datenbindung realisieren:

Nachdem Sie das Arbeitsblatt entworfen haben, erfahren Sie hier, wie Sie die Datenbindung über Code und Datendateien implementieren:

Rufen Sie zuerst die Methode „generateData“ in der Datei bindTree.js auf, um Zufallsdaten zu generieren, und verwenden Sie sie dann

Die Methode GC.Spread.Sheets.Bindings.CellBindingSource wird verwendet, um die gebundene Datenquelle zu generieren, dann die gebundene Datenquelle in das initialisierte aktive Seitenblatt einzufügen und schließlich die Daten zu laden. Der spezifische Implementierungscode lautet wie folgt:

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {
    
    

// 加载文件（第一步）

spread.fromJSON(bindFile)

//第三步绑定数据

// mock数据

let data = generateData(20)

// 生成绑定数据源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 获取当前活动sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 获取sheet中的目标表格，并将表格的数据设置为随数据量自动纵向扩展

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加载数据

sheet.setDataSource(source)

}

(Code zur Implementierung der Datenbindung)

Der Gesamtcode nach der Kombination der obigen Schrittcodes lautet wie folgt:

/

/绑定数据信息（第二步）

const initDesigner = (designerEntity:GcDesigner.Spread.Sheets.Designer.Designer) =\> {
    
    

designer = designerEntity

customeConfig(designer)

//第二步绑定数据绑定表信息（designer初始化完成之后，加载右侧Tree）

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

let spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook

loadBindData(spread)

}

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {
    
    

// 加载文件（第一步）

spread.fromJSON(bindFile)

//第三步绑定数据

// mock数据

let data = generateData(20)

// 生成绑定数据源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 获取当前活动sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 获取sheet中的目标表格，并将表格的数据设置为随数据量自动纵向扩展

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加载数据

sheet.setDataSource(source)

}

return{
    
    

styleInfo,initDesigner

}

(Code des Gesamtprozesses)

																（最终效果图）

Anschließend können Sie den Online-Editor im Browser erleben und nutzen (sehr ähnlich der Excel-Bedienung).

Anmerkung:

Der vollständige Quellcode ist an die Datei vue3-spreadJS-ts im Ordner day2 unterhalb des Artikels angehängt und kann mit dem Befehl npm run dev direkt im Terminal ausgeführt werden.

Quelllink: https://gitee.com/GrapeCity/SpreadJS__20230605xia (Gitee)

https://github.com/GrapeCityXA/SpreadJSBiaoGEcHAJianXia (Github)

Zusammenfassen

Diese beiden Artikel stellen die Methoden und spezifischen Funktionen von SpreadJS im Vue-Framework ausführlich vor und hoffen, Ihnen auf dem Weg zum Erlernen von SpreadJS zu helfen.

Weitere Referenzen:

Das Video-Tutorial zu diesem Artikel

Technisches Informationsdokument zur Tischsteuerung

>>>>Erweiterte Informationen:

Design und Implementierung der Online-Dokumentversionsverwaltung für Excel-Tabellen – Grape City Technology Blog (grapecity.com.cn)

Ein Artefakt zur Verbesserung der Arbeitseffizienz: Chrome Excel-Erweiterungs-Plug-in basierend auf SpreadJS – Grape City Technology Blog (grapecity.com.cn)

SpreadJS-Anwendungsszenario einer Excel-ähnlichen Tabellensteuerung – Analyse und Lösung des Systems zur Einkommensteuererklärung von Unternehmen – Grapecity Technology Blog (grapecity.com.cn)