umi react 集成 spreadjs

前言：前几天做了一个react集成spreadjs表格操作的功能，奈何我这对react已经忘得差不多营养不良的小菜菜开始了复习react之旅。看来看去选择了umi，原因很简单：该有的都有，不该有的也有，而且最重要的一点是容易上手，懂得都懂~~下面开始正文。。。

不了解umi可以先去umi官网：https://umijs.org/zh-CN/docs，这里重点讲解集成spreadjs

umi

1.首先下载umi脚手架，电脑中要有node！！！(node -v,npm -v)，想到大家懒得去官网看，我就直接拿过来贴在这。

推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

2.先找个地方建个空目录。

$ mkdir myapp && cd myapp

3.通过官方工具创建项目，

$ yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

// 然后
yarn

yarn start

就能看到页面了

spreadjs

简单使用的话，需要的依赖包不多，但体积都不小，加上spreadjs文档对于我这种小菜菜并不友好，不懂就得问吖

1.下载依赖包

yarn add @grapecity/spread-sheets-react @grapecity/spread-sheets

2.在你的.tsx文件中

import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import GC from '@grapecity/spread-sheets' // 我感觉这个就是jq中的$的意思，自己体会

3.下面return中

return(
    <div>
        <SpreadSheets hostStyle={{ width: '100%' }} workbookInitialized={ workbookInitialized }>
              <Worksheet { ...worksheetConfig }></Worksheet>
            </SpreadSheets>
    </div>    
)

workbookInitialized表格加载完成调用的方法，类似与Vue中的mounted，方法参数是表格本体，使用的时候可以打印出来看看，下面贴出我的代码：

// spreadjs 初始化
  function workbookInitialized(workbook) {
    spread = workbook
    setTimeout(() => {
      sheet = spread.getActiveSheet()
      sheet.setColumnCount(30)
      // spread双击
      spread.bind(GC.Spread.Sheets.Events.CellDoubleClick, (a, b) => {
        
      });
      // 选择区域
      spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
        
      })
    }, 0)
  }

结语：到此，表格就能出现了，需要什么功能，都可以去官网api查看，虽然不太友好，但是spreadjs程序员哥哥回复速度是一流的，还是那句话，不懂就问。

网址：https://www.grapecity.com.cn/developer/spreadjs

三大框架集成网址：https://demo.grapecity.com.cn/spreadjs/help/latest/content/UsingtheSpreadSheetsElement.html

umi react 集成 spreadjs

推荐阅读