Newcomers must see! Teach you how to use the browser form plug-in (below)

Abstract: This article was originally created and published by the technical team of Grape City in the blog garden. Please indicate the source of the reprint: Grape City official website , Grape City provides developers with professional development tools, solutions and services to empower developers.

Preface | Problem Background

As an excellent worker, Excel is an indispensable office software for everyone to go to work. With the advent of the Internet age, more and more companies have begun to use various B/S systems to process tabular data files. So is there an Excel add-in that can be used directly in the browser to process data? The answer is yes. The editor of this article will introduce how to integrate the online table plug-in (hereinafter referred to as "SpreadJS") and the online table editor (Excel-like browser plug-in) in the Vue framework to use the Excel plug-in in the browser to process data.

In this tutorial, we will use node.js, please ensure that the latest version is installed, in addition, you need to use the software Visual Studio Code (hereinafter referred to as "VSCode") as the programming environment, please run it as an administrator.

In the previous article ( "Must read for newcomers! Teach you how to use the browser table plug-in (Part 1)" ), the editor introduced how to integrate the table plug-in (SpreadJS) in the Vue framework. This chapter will continue to introduce How to integrate online form editor in Vue.

How to integrate online form editor (designer) in Vue framework

Integrate online form editor in Vue:

In this section, the editor will introduce how to integrate the online form editor in the Vue framework and how to use the editor to implement form data binding.

The Vue integrated online table editor is similar to SpreadJS. First, introduce the resources that need to be integrated into Vue, and then use the styleInfo tag and designerInitialized to set the size of the table (the method is the same as Vue integrated SpreadJS, please refer to the first article for details ) .

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引入在线表格编辑器的资源）

Implement data binding:

In order to describe data binding more vividly and specifically, the editor will use a simple case to introduce how data binding is implemented in SpreadJS.

Realization requirements: Implement a simple data table of Apple sales through SpreadJS. The data in the data table can be echoed to the data table through the data file. The following are the specific implementation method steps:

(1) Design visualization table:

Use the spreaeJs table designer to drag and design a table as shown in the figure below (the method of creating a table is the same as Excel, not described in detail).

								      （初始化一个Excel表格）

In addition to the SpreadJS visualization method to create tables, the editor will introduce another method of using data files to realize tables:

The provided source code resource contains two data files bindFile.js and bindTree.js, and the bindFile.js file is the Json file format of the above table, and the bindFile.js file can be read by using the spread.fromJSON(bindFile) method and display it on the page.

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

// 加载文件（第一步）

spread.fromJSON(bindFile)

}

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

(2) Create a worksheet:

After designing the visual table, create a data table to store data. Creating a worksheet can also be divided into a visual creation worksheet and a data file implementation worksheet. Since the operation of the visual design worksheet is relatively simple, I will not introduce it in detail here. The following mainly introduces how to implement the data table through code: use the setData method of the designer to read the bindSchema (Json format of the data table) in the bindTree.js file and load it into the SpreadJS page.

//The second step is to bind the data binding table information (after the designer is initialized, load the right Tree)

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

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

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

(implement the code to create the worksheet)

(3) Realize data binding:

After designing the worksheet, here's how to implement data binding through code and data files:

First call the generateData method in the bindTree.js file to generate random data, and then use

The GC.Spread.Sheets.Bindings.CellBindingSource method is used to generate the bound data source, then put the bound data source into the initialized active page sheet, and finally load the data. The specific implementation code is as follows:

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 to implement data binding)

The overall code after combining the above step codes is as follows:

/

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

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 of the overall process)

																（最终效果图）

After doing this, you can experience and use the online editor in the browser (highly similar to Excel operation).

Remark:

The complete source code is attached to the vue3-spreadJS-ts file in the day2 folder below the article, and it can be run directly in the terminal using the npm run dev command.

Source link: https://gitee.com/GrapeCity/SpreadJS__20230605xia (Gitee)

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

Summarize

These two articles introduce in detail the methods and specific functions of SpreadJS in the Vue framework, hoping to help you on the road to learning SpreadJS.

Further references:

The video tutorial corresponding to this article

Table control technical information document

>>>>Extended information:

Design and Implementation of Online Excel Sheet Document Version Management- Grape City Technology Blog (grapecity.com.cn)

An artifact to improve work efficiency: Chrome Excel extension based on SpreadJS - Grape City Technology Blog (grapecity.com.cn)

SpreadJS Application Scenario of Excel-like Table Control——Analysis and Solution of Enterprise Income Tax Declaration System- Grapecity Technology Blog (grapecity.com.cn)