文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-03 13:23

关注

概述

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

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

新建React 项目(耗时 1 Min)

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

还不清楚什么是npx?请点击这里了解一下《What Is npx?》

cd react-spread-sheetsnpm 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}></SpreadSheets></div>

启动 Npm(耗时 1 Min)

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

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

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

关于葡萄城:

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯