编程知识 cdmana.com

基于Vite+React构建在线Excel

Vite是随着Vue3一起发布的一款新型前端构建工具,能够显著的提升前端开发体验,它主要由两部分组成:

(1)一个开发服务器,它基于** 原生 ES模块提供了 丰富的内建功能,如速度快到惊人的  模块热更新( HMR)。

(2)一套构建指令,它使用  Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

Vite意在提供开箱即用的配置,同时它的  插件 API JavaScript API带来了高度的可扩展性,并有完整的类型支持。

Vite最初发行时,仅能用来构建Vue3项目,但随着随用群体的不断扩大,目前能支持构建的项目越来越多,已经包含了以下几种项目模板:

JavaScriptTypeScript
 vanilla vanilla-ts
 vue vue-ts
 react react-ts
 preact preact-ts
 lit lit-ts
 svelte svelte-ts

我们可以看到,目前已经支持了react以及react-ts模板。对于一个经常性使用React开发项目的程序媛来说,之前一直使用的时** create-react-app**来构建react应用,也没有觉得有太大的问题。最开始要使用到Vite时,本葡萄的内心还是有点疑虑的,因为毕竟Vite是跟着Vue3发布的,对于使用者而言,潜意识会觉得它和Vue更加适配;但在实际上手用了之后,才会发现Vite的搭建速度,不亏于它的名字。

接下来我们就是一起动手用Vite来创建一个基于React的在线Excel项目吧。

项目实战

兼容性提示:Vite 需要 Node.js 版本 >= 12.0.0。然而,有些模板需要依赖更高的Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的Node 版本。

我们可以通过以下命令,快速的创建一个react-ts的项目,如果当前项目并不想使用ts的话,只需要将–template后的预制模板改为react即可。

# npm 6.x  vite-react-ts表示项目名,可以自己随便改一个
npm create [email protected] vite-react-ts --template react-ts

# npm 7+, extra double-dash is needed:
npm create [email protected] 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

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

查看  create-vite 可以获取其它模板的更多细节:vanilla,vanilla-ts,vue,vue-ts,react,react-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts。

基于Vite+React构建在线Excel_5e

创建一个react-ts项目仅需7.813秒,这速度已经让很多项目望尘莫及了。接下来我们既可以按照终端中的提示,先进入到项目目录下,之后执行npm install,安装完成后npm run dev就可以启动了。这个阶段如果有任何安装问题,可以面向搜索引擎解决,一般来说,需要指定一个其它的安装镜像。

基于Vite+React构建在线Excel_5e_02

项目默认启动在3000端口。打开后展示如上图所示,到这一步我们使用Vite就已经创建好React项目了,接下来我们需要引入纯前端表格控件,用来构建一个在线Excel。要想使用,就必须先引入组件相关资源,我们可以在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"
  },

     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

添加完成后,再次进入到当前项目目录下,执行npm install,完成新添加资源的安装。当然,大家在引入时,可以现在npm上查找一下SpreadJS目前最新的版本,去引入最新版本的产品。

引入完成后,将项目中不需要使用的东西删一删,让页面看起来干净一点。之后在src下新建components文件夹,用来存放之后我们写的表格组件。components文件夹下新建OnlineDesigner.tsx文件。接下来我们就需要在OnlineDesigner.tsx文件中去引入SpreadJS相关资源,编写表格组件,详细代码如下:

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} />
      )
  }
}


     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.

接下来,我们需要在app.tsx中引入自己定义的OnlineDesigner组件即可,详细代码为:

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


function App() {


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


export default App



     
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

最后,我们来看看显示效果吧

基于Vite+React构建在线Excel_5e_03

通过以上几步操作,你就可以拥有一个在线的Excel系统辣~

文内demo下载地址: https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjE3NDQzfDIwNTI5YzgwfDE2NTU5NjI3OTR8NjI2NzZ8OTk3MTg%3D

了解更多实例: https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html

版权声明
本文为[51CTO]所创,转载请带上原文链接,感谢
https://blog.51cto.com/powertoolsteam/5411660

Scroll to Top