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

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

  概述

  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());

  }

  }

  添加模板

  

  启动 Npm(耗时 1 Min)

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

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

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

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

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