Build Online Excel Based on Vite+React

Vite is a new front-end construction tool released with Vue3, which can significantly improve the front-end development experience. It mainly consists of two parts:

(1) A development server, which is based on * native ES modules provide a wealth of built-in features , such as the astonishingly fast hot module update ( * HMR ).

(2) A set of build instructions that use Rollup to package your code, and it is preconfigured to output highly optimized static assets for production environments.

Vite is designed to provide out-of-the-box configuration, while its plugin API and JavaScript API bring a high degree of extensibility with full type support.

When Vite was initially released, it could only be used to build Vue3 projects, but with the continuous expansion of the ready-to-use group, more and more projects can be built, including the following project templates:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

We can see that react and react-ts templates are currently supported. For a programmer who often uses React to develop projects, I have been using create-react-app to build React applications, and I don't think there is much problem. When I first started using Vite, I was still a little suspicious, because after all, Vite was released with Vue3. For users, subconsciously, they would think that it is more suitable for Vue; but after actually using it by hand, Only then will you discover the speed of Vite's construction, not due to its name.

Next, let's start using Vite to create an online Excel project based on React.

Project combat

Compatibility tip: Vite requires Node.js version >= 12.0.0. However, some templates require a higher Node version to function properly, so be careful to upgrade your Node version when your package manager warns you.

We can quickly create a react-ts project with the following command. If the current project does not want to use ts, just change the prefabricated template after --template to react.

 # npm 6.x  vite-react-ts表示项目名，可以自己随便改一个
npm create vite@latest vite-react-ts --template react-ts

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-react-ts -- --template react-ts

# yarn
yarn create vite vite-react-ts--template react-ts

# pnpm
pnpm create vite vite-react-ts-- --template react-ts

See create-vite for more details on other templates: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.

It only takes 7.813 seconds to create a react-ts project, which is already beyond the reach of many projects. Next, we can follow the prompts in the terminal, first enter the project directory, and then execute npm install. After the installation is complete, npm run dev can be started. If there is any installation problem at this stage, it can be solved for the search engine. Generally speaking, you need to specify another installation image.

The project starts on port 3000 by default. After opening, the display is as shown in the figure above. At this point, we have created a React project using Vite. Next, we need to introduce a pure front-end table control to build an online Excel. To use it, you must first introduce component-related resources. We can add the following to package.json:

 "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@grapecity/spread-sheets": "15.0.7",
    "@grapecity/spread-sheets-react": "15.0.7",
    "@grapecity/spread-excelio": "15.0.7",
    "@grapecity/spread-sheets-charts": "15.0.7",
    "@grapecity/spread-sheets-print": "15.0.7",
    "@grapecity/spread-sheets-pdf": "15.0.7",
    "@grapecity/spread-sheets-barcode": "15.0.7",
    "@grapecity/spread-sheets-shapes": "15.0.7",
    "@grapecity/spread-sheets-resources-ko": "15.0.7",
    "@grapecity/spread-sheets-resources-ja": "15.0.7",
    "@grapecity/spread-sheets-resources-zh": "15.0.7",
    "@grapecity/spread-sheets-languagepackages": "15.0.7",
    "@grapecity/spread-sheets-pivot-addon": "15.0.7",
    "@grapecity/spread-sheets-designer": "15.0.7",
    "@grapecity/spread-sheets-designer-resources-cn": "15.0.7",
    "@grapecity/spread-sheets-designer-react": "15.0.7",
    "@grapecity/spread-sheets-tablesheet": "15.0.7"
  },

After the addition is complete, go to the current project directory again and execute npm install to complete the installation of the newly added resources. Of course, when you introduce it, you can look up the latest version of SpreadJS on npm now to introduce the latest version of the product.

After the introduction is complete, delete the things that are not needed in the project to make the page look cleaner. Then create a new components folder under src to store the table components we write later. Create a new OnlineDesigner.tsx file in the components folder. Next, we need to introduce SpreadJS related resources in the OnlineDesigner.tsx file and write table components. The detailed code is as follows:

 import { Component, PropsWithChildren, ReactNode } from 'react'
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GCDesigner from '@grapecity/spread-sheets-designer';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
import { Designer } from '@grapecity/spread-sheets-designer-react';
GC.Spread.Common.CultureManager.culture('zh-cn')


interface Props{}
interface State{}
   


export default class OnlineDesigner extends Component<Props, State>{
  designer: null | GCDesigner.Spread.Sheets.Designer.Designer;
  constructor(props: Props){
    super(props)
    this.designer = null
  }


  designerInitialized = (designer: GCDesigner.Spread.Sheets.Designer.Designer) => {
    this.designer = designer
    console.log(designer)
    // 获取与designer相关联的工作簿(Spread)
    let spread:GC.Spread.Sheets.Workbook = this.designer.getWorkbook() as GC.Spread.Sheets.Workbook
    // 获取当前活动工作表
    let sheet:GC.Spread.Sheets.Worksheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet
    //设置数值
    sheet.setValue(0,0,'Hello Grapecity')
    //设置行高
    sheet.setColumnWidth(0,120)
    //设置区域内容
    sheet.setArray(1,0,[[2,3,5]])
    //设置公式
    sheet.setFormula(3,0,'=sum(A2:C2)')


  }


  render(): ReactNode {
      return(
          <Designer
            spreadOptions={{sheetCount: 3}}
            styleInfo={{height: '98vh'}}
            designerInitialized = {this.designerInitialized}
          />
      )
  }
}

Next, we need to introduce our own defined OnlineDesigner component in app.tsx. The detailed code is:

 import './App.css'
import OnlineDesigner from './components/OnlineDesigner'


function App() {


  return (
    <div className="App">
      <OnlineDesigner/>
    </div>
  )
}


export default App

Finally, let's take a look at the display effect