只需3分钟，就能轻松创建一个SpreadJS的React项目

概述

SpreadJS 纯前端表格控件 V11.2(SP2) 已经全面支持了 React 的拓展。接下来我们看下如何利用3分钟快速创建一个 SpreadJS 的 React 项目。

1.新建React 项目（耗时 1 Min）

直接运行：npx create-react-app react-spread-sheets

还不清楚什么是npx？请点击这里了解一下《What Is npx?》

cd react-spread-sheets
npm start

访问 http://localhost:3000 查看效果

2.导入 Spread.Sheets React 组件（耗时 30 S）

npm install @grapecity/spread-sheets-react

如果您需要 excel 导入/导出、chart 图表、打印或者 pdf 导出功能，可以选择导入相应的SpreadJS组件，具体请查看https://www.npmjs.com/~grapecity。

3.页面添加 Spread.Sheets 元素（耗时 30 S）

导入Spread.Sheets

import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

添加构造器

constructor(props){
super(props);
this.hostStyle =
{
left: "20px",
right: "20px",
position: "absolute",
textAlign: "left"
};
var self = this;
this.workbookInitialized = function(workbook){
self.spread = workbook;
console.log(workbook.getSheetCount());
}
}

添加模板

<div style={this.hostStyle}>
<SpreadSheets workbookInitialized={this.workbookInitialized}></SpreadSheets>
</div>

启动 Npm（耗时 1 Min）

workbookInitialized 是 spread 初始化完成后的回调事件，我们可以在事件中得到初始化好的 workbook 对象。

添加部署授权需要同时给 Sheets 和 ExcelIO 同时添加，部署授权可以在全局 config 中配置。

只需 3 分钟，一个SpreadJS的 React 项目就创建完成了，当然纯前端表格控件 SpreadJS 的强大不仅于此，去实际试用感受一下吧

关于葡萄城：

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。

转载于:https://blog.51cto.com/powertoolsteam/2178001

只需3分钟，就能轻松创建一个SpreadJS的React项目相关推荐

只需几次点击即可创建一个Astra和LearnDash在线教育网站 – 简单快捷！
Astra为不喜欢从头开始设计网站的任何人提供了一个巨大的入门模板库. 这些网站是使用各种页面构建器制作的,例如 Elementor.Beaver Builder.Brizy 以及 Gutenberg ...
can和could的用法_中学生的难题can和could有什么关系，只需三分钟让你轻松记
很多学生都很疑惑情态动词can和could怎么用,有什么区别?我认为他们是一对姐妹花,can是姐姐,could是妹妹.姐姐妹妹各有千秋,不分上下. 今天我们就来总结一下它们的用法: 情态动词本身有意义 ...
【只需三步】用IDEA打开一个新的jsp项目如何跑起来（运行起来）
第1步:打开JSP项目目录第2步:设置项目结构实际上就是把Projects Settings下面的Project.Modules.Libraries.Facets和Artifacts都设置一遍,我 ...
晚上，睡前只需1分钟，一觉到天亮！
快节奏的生活谁都有压力大的时候,压力一大就影响睡眠,觉睡不好就影响到隔天的工作表现,就一直恶性循环下去,让你天天心情差,状态又不好,怎么办? 其实,只要睡前来个睡前操,只需1分钟,就能让你轻松入睡,一 ...
red hat安装宝塔_只需几分钟即可安装Red Hat Container Development Kit（视频）
red hat安装宝塔自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Ki ...
只需几分钟即可安装Red Hat Container Development Kit（视频）
自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Kit(CDK)的可用性令我 ...
纸片人「活」了。Meta AI新作：只需几分钟，手绘小人有了灵魂
想让画中的「纸片人」有生命,Meta AI来搞定!昨日,Meta AI宣布了一种独创性方法,只需几分钟,就能动画化儿童手绘的角色,效果拔群. 快看,「纸片人」居然自己跳出来了! 小猫学会了hiphop ...
excel android vba,你加班1小时做Excel表格，我用VBA只需1分钟！(免费领教程)
VBA的使用领域非常广泛,HR数据统计和分析.日常办公.都可以看到它的身影,用好VBA轻松助你一臂之力. 什么是VBA? 一句话概括:在Excel中想实现什么功能,就可以用VBA语言编写一段程序去完成 ...
900页文档比对只需5分钟？鸿翼InWise文档比对，以人工智能撬动办公效率杠杆
在日常办公中,多份文件间的检查.纠错.复核工作不可避免,这类工作往往具有很强的重复性,占用了大量的工作时间.鸿翼InWise平台文档比对能够赋能企业极速完成海量文档.图片的高精度比对,以人工智能撬动企 ...

只需3分钟，就能轻松创建一个SpreadJS的React项目

概述

只需3分钟，就能轻松创建一个SpreadJS的React项目相关推荐

最新文章

热门文章

只需3分钟，就能轻松创建 一个SpreadJS的React项目

概述

只需3分钟，就能轻松创建 一个SpreadJS的React项目相关推荐

最新文章

热门文章

只需3分钟，就能轻松创建一个SpreadJS的React项目

只需3分钟，就能轻松创建一个SpreadJS的React项目相关推荐