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

概述

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

创新互联长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为辰溪企业提供专业的做网站、成都网站制作，辰溪网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

只需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());
}
}

添加模板

启动 Npm（耗时 1 Min）

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

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

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

关于葡萄城：

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

本文名称：只需3分钟，就能轻松创建一个SpreadJS的React项目-创新互联
文章地址：http://cqcxhl.cn/article/dcohdp.html

重庆分公司，新征程启航

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

概述

其他资讯