如何创建SpreadJS的React项目？这篇文章教你3分钟搞定！

概述

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

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

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

还不清楚 npx请点击这里了解一下《What Isnpx》。

cd react-spread-sheets

npm start

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

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

js npm install @grapecity/spread-sheets-react

如果您需要 excel 导入/导出、chart 图表、打印或者 pdf 导出功能，可以选择导入相应的 SpreadJS 组件，具体请点击这里查看。

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>

4.启动 Npm（耗时 1 Min）

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

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

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS，可满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填 、在线文档、图表公式联动、类 Excel UI 设计等业务场景，并在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成中无需大量代码开发和测试，极大降低了企业研发成本和项目交付风险。

购正版SpreadJS 表控件授权限时优惠！最高立减万元！点击了解更多优惠

如果您对我们的产品还有任何疑问，欢迎咨询在线客服>>