扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
SpreadJS 纯前端表格控件 V11.2(SP2) 已经全面支持了 React 的拓展。接下来我们看下如何利用3分钟快速创建一个 SpreadJS 的 React 项目。
创新互联-专业网站定制、快速模板网站建设、高性价比东港网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东港网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖东港地区。费用合理售后完善，10年实体公司更值得信赖。
1.新建React 项目（耗时 1 Min）
直接运行：npx create-react-app react-spread-sheets
还不清楚什么是npx？请点击这里了解一下《 What Is npx ?》
cd react-spread-sheets npm start
访问 http://localhost:3000 查看效果
2.导入 Spread.Sheets React 组件（耗时 30 S）
npm install @grapecity/spread-sheets-react
如果您需要 excel 导入/导出、chart 图表、打印或者 pdf 导出功能，可以选择导入相应的SpreadJS组件， 具体请查看https://www.npmjs.com/~grapecity。
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());
}
}
添加模板