彩票走势图

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

转帖|使用教程|编辑:龚雪|2020-12-28 10:14:49.400|阅读 137 次

概述:本文将为大家介绍如何3分钟创建 SpreadJS 的 React项目。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

SpreadJS v14.0正式版下载

概述

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

SpreadJS使用教程

1. 新建 React 项目(耗时 1 Min)

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

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

cd react-spread-sheets

npm start

访问 查看效果

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报表控件授权限时优惠!最高立减万元!点击


慧都2020年终大促

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP