Through the above learning, we have used Vite to build the project prototype of Vue 3. Today, based on this prototype, we will integrate the SpreadJS spreadsheet component with the online editor component to enable Excel formula calculation, online import and export of Excel documents, PivotTable and visual analysis capabilities to realize the prototype of the online form editing system.

Design ideas

· Create two components of SpreadJS and Designer at the same time to display different component types by switching routes.

· Add “Load” and “Update” buttons to the toolbar of the editor component.

· Click “Load” to load the Excel file obtained from the server, modify the component in the editor, and click “Update” button to transfer the modified file to the server.

· Switch the route to display the SpreadJS component, and add two buttons “load” and “update” to the component, with the same functions as above.

SpreadJS component introduction

SpreadJS is an HTML5-based native JavaScript component that is compatible with more than 450 Excel formulas and provides a high degree of Excel like functionality for developing Web Excel components. Realize multi-user collaborative editing, high-performance template design, data filling and other functional modules, the component architecture conforms to UMD specifications, can be embedded in various applications in a native way, and combined with the backend technology framework.

Currently, SpreadJS has packaged components for Vue 2, not Vue 3 yet, but it can be integrated into the Vue 3 project by wrapping the SpreadJS components and table editor ourselves.

Integrate SpreadJS with Vue 3

1. Install the module

Modify the package.json file, add the modules we need, and run the command NPM install to install all dependent projects.

{"@fortawesome/fontawesome-free": "^5.14.0", "@grapecity/spread-excelio": "^ 14.0.1", "@ grapecity/spread - sheets" : "^ 14.0.1", "@ grapecity/spread sheets - barcode" : "^ 14.0.1", "@ grapecity/spread sheets - charts" : "^ 14.0.1", "@ grapecity/spread sheets - designer" : "^ 14.0.1", "@ grapecity/spread sheets - designer - resources - cn" : "^ 14.0.1", "@ grapecity/spread sheets - designer - vue" : "^ 14.0.1", "@ grapecity/spread sheets - languagepackages" : "^ 14.0.1", "@ grapecity/spread sheets - PDF" : "^ 14.0.1", "@ grapecity/spread sheets - the pivot - addon" : "^ 14.0.1", "@ grapecity/spread sheets - print" : "^ 14.0.1", "@ grapecity/spread sheets - resources - useful" : "^ 14.0.1", "@ grapecity/spread sheets - shapes" : "^ 14.0.1", "@ grapecity/spread sheets - vue" : "^ 14.0.1", "axios" : "^ 0.21.0", "vue" : "^ 3.0.2", "vue - the router" : "^ 4.0.0 - rc. 5"},Copy the code

2. Configure routes

Add three files to the SRC folder.

The router/index. Js

Views/SpreadSheet. Vue

Views/Designer. Vue

Configuring routes:

import { createRouter, createWebHistory } from "vue-router";

const routes = [

  {

    path: "/",

    name: "Designer",

    component: () => import("../views/Designer.vue"),

  },

  {

    path: "/spreadSheet",

    name: "SpreadSheet",

    component: () => import("../views/SpreadSheet.vue"),

  }

];

export const router = createRouter({

  history: createWebHistory(),

  routes:routes

});

Copy the code

3. Introduce in main.js:

import { createApp } from 'vue' import { router } from './router/index' import App from './App.vue' import './index.css'  const app = createApp(App) app.use(router); app.mount('#app')Copy the code

4. Modify app.vue:

In the main.js file, add the Vue Router file to the project (in Vue 2 it was imported using vue.use (Router), but in Vue 3 it was added differently). As shown in the screenshot below, Vue 3 is actually created using the createApp method, which needs to be added to the project through app.use(Router) before mounting the application.

<template>

<div id="app">

    <div>

        <router-link to="/">Designer</router-link> |

        <router-link to="/spreadSheet">SpreadSheet</router-link>

    </div>

  <router-view/>

</div>

</template>

<script>

export default {

  name: 'App',

  components: {

  },

  setup(){

  }

}

</script>

Copy the code

Vue Router 3 requires that we import new methods to make our code work in order to support Typescript. The most important of these are createRouter and createWebHistory.

5. Integrate designer components

After configuring the route, you can start integrating the Designer component. First, add two files under the Components folder:

The components/Designer. Vue

The components/SpreadSheet. Vue

Next, integrate the SpreadJS table editor in Designer.vue as shown below:

· Add a div in the template, which is the container of the editor. You can set the width and height of the container through CSS, which is to define the display size and position of the editor.

· Import the dependencies needed by the editor.

· Create a new editor in the Setup function.

<template> <div> <div ref="ssDesigner" style="height:700px; width:100%; text-align: left;" ></div> </div> </template> <script> import { onMounted, ref} from "vue"; import ".. /.. /node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"; import ".. /.. /node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"; import "@grapecity/spread-sheets-designer-resources-cn"; import "@grapecity/spread-sheets-designer"; import GC from '@grapecity/spread-sheets' import ExcelIO from '@grapecity/spread-excelio' export default { name: 'Designer', props: { }, setup(props, {emit}) { const ssDesigner = ref(null); onMounted(() => { var designer = new GC.Spread.Sheets.Designer.Designer(ssDesigner.value); emit("designerInitialized", designer); }); return { ssDesigner }; } } </script>Copy the code

Third, import this component and its dependencies in views/Designer.vue.

import Designer from '.. /components/Designer.vue' import {ref} from "vue" import axios from "axios" import GC from '@grapecity/spread-sheets' import ExcelIO from '@grapecity/spread-excelio'Copy the code

Fourth, use the component label in the template.

<template>

  <div>

    <Designer v-on:designerInitialized="designerInitialized"></Designer>

  </div>

</template>

Copy the code

Finally, initialize the editor in the setup function.

let designer = undefined;

let designerInitialized=(wb)=>{

      designer = wb;

      let spread = designer.getWorkbook();

    }

Copy the code

Complete the above steps and the page will display the editor UI.

How to customize the editor toolbar?

Now that we’ve successfully integrated the SpreadJS editor into our project, we’ll show you how to create two new “Load” and “Update” buttons in the toolbar.

Thanks to the new configurable design of the SpreadJS online form editor, any area can be configured using JSON Config. By modifying the default GC. Spread. Sheets. Designer. DefaultConfig, can achieve the custom function.

1. Customize the Ribbon TAB

In the browser Console input GC. Spread. Sheets. Designer. DefaultConfig to view ribbon TAB configuration by default. Following the default configuration, you can customize the action tabs.

let DefaultConfig = GC.Spread.Sheets.Designer.DefaultConfig; Let customerRibbon = {id: "operate", text: "operate", buttonGroups: [],};Copy the code

2. Customize buttons

Before you can define a button, you need to define the Commands that the button is clicked on and register the Commands with the commandMap property of config.

RibbonFileCommands = {"loadTemplateCommand": {iconClass: "ribbon-button-download", text: "load ", //bigButton: true, commandName: "loadTemplate", execute: load }, "updateTemplateCommand": { iconClass: "ribbon-button-upload", text: //bigButton: true, commandName: "updateTemplate", execute: update}}Copy the code

The sample code above registers the loadTemplateCommand and updateTemplateCommand commands.

· Execute corresponds to the function of the specific execution, i.e. load and update methods.

· iconClass is button style, and you can make button pictures

· Text displays text for the button

· commandName is the commandName, which must be globally unique

IconClass example code:

. Ribbon -button-download {background-image: url(image address, can be base64 SVG)};Copy the code

Add config to button config:

Let customerRibbon = {id: "operate", text: "operate", buttonGroups: [{label: "File operate", thumbnailClass: "ribbon-thumbnail-spreadsettings", commandGroup: { children: [ { direction: "vertical", commands: ["loadTemplateCommand", "updateTemplateCommand"], } ], }, }, ], };Copy the code

Add custom commands and buttons to the config of Designer:

DefaultConfig.ribbon.push(customerRibbon);

    DefaultConfig.commandMap = {};

    Object.assign(DefaultConfig.commandMap, ribbonFileCommands);

Copy the code

Finally, don’t forget to fill in the code in the Load and UPDATE methods.

What the Load and update methods do

The Load method is used to perform the loading of Excel files. After receiving the JSON data passed behind the scenes, load the file using the fromJSON method as shown in the following figure:

let load = (e)=>{ let spread = designer.getWorkbook(); let formData = new FormData(); formData.append("fileName", "path"); axios.post('spread/loadTemplate', formData, { responseType: "Json"}). Then ((response) = > {the if (response) {alert (" load success "); templateJSON = response.data; spread.fromJSON(templateJSON); }}). Catch ((response) => {alert(" error "); })}Copy the code

The Update method is used to perform an Update to a file. When the editor performs operations on the loaded file, such as modifying background color and adding text, the toJSON method is used to save the current spread as JSON data and pass it to the background storage, with the code as follows:

let update = (e)=>{ let spread = designer.getWorkbook(); let spreadJSON = JSON.stringify(spread.toJSON()); let formData = new FormData(); formData.append("jsonString", spreadJSON); formData.append("fileName", "fileName"); Axios.post ('spread/updateTemplate', formData). Then ((response) => {if(response) {alert(" update successful "); }}). Catch ((response) => {alert(" error "); })}Copy the code

Once this is done, the new button will work. As shown in the example below, click the toolbar load button to load the file in the SpreadJS table editor.

This is all part of Vue 3 component development: Building a Spreadjs-based form editing system (Component Integration). By integrating SpreadJS spreadsheet components and online editor components, we have built a prototype of an online form editing system.

In the next functional extension chapter, we will demonstrate how to add more spreadsheet functionality to the prototype system and provide the entire project source code for reference.

Further reading

· Vue 3 component development practice: Build spreadJs-based table editing system (Environment Building)

· Vue 3 component development practice: Build spreadjs-based table editing system (Function Expansion)

· SpreadJS Vue framework support