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

2022-12-09 0 388

简述

SpreadJS 纯后端表单命令行 V11.2(SP2) 早已全面性全力支持了 React 的开拓。接下去他们看下怎样借助3两分钟加速建立两个 SpreadJS的 React 工程项目。

增建React 工程项目(费时 1 Min)

间接运转:npx create-react-app react-spread-sheets

cd react-spread-sheets

npm start

出访 http://localhost:3000 查阅效用

引入 Spread.Sheets React 模块(费时 30 S)

npm install @grapecity/spread-sheets-react

假如您须要 excel 引入/求出、chart 图象、列印或是 pdf 求出机能,能优先选择引入适当的SpreadJS模块,具体内容请查阅https://www.npmjs.com/~grapecity。

网页加进 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}>

< /div>

启动 Npm(费时 1 Min)

workbookInitialized 是 spread 初始化完成后的回调事件,他们能在事件中得到初始化好的 workbook 对象。

加进部署授权须要同时给 Sheets 和 ExcelIO 同时加进,部署授权能在全局 config 中配置。

只需 3 两分钟,两个 SpreadJS 的 React 工程项目就建立完成了,当然纯后端表单命令行 SpreadJS 的强大不仅于此,去实际试用感受一下吧

关于葡萄城(https://www.grapecity.com.cn/):

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务