电子表格控件Spreadjs教程：如何在 React 中使用 SpreadJS-控件新闻-慧都网

电子表格控件Spreadjs教程：如何在 React 中使用 SpreadJS

翻译|使用教程|编辑：鲍佳佳|2020-09-30 11:55:28.610|阅读 275 次

概述：SpreadJS支持React –一个JavaScript库，开发人员可以通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。使用React，您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面

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

相关链接：

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。更多详情信息文章教程点击这里>>

点击下载SpreadJS最新试用版

SpreadJS支持Vue----一个JavaScript框架，该框架为开发人员提供了不同的工具，以帮助他们构建复杂的用户界面和Web应用程序。

SpreadJS支持React –一个JavaScript库，开发人员可以通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。

使用React，您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面。

SpreadJS可以通过以下两种方式与React一起使用：

使用节点包管理器
使用传统HTML

使用节点包管理器

此方法涉及以下步骤：

创建一个React项目
打开命令提示符窗口，然后键入以下命令：
```
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start
```
完成后，将在目录中的指定位置创建react项目。
在项目中安装SpreadJS React模块
接下来，您需要使用以下命令在项目中安装@ grapecity / spread-sheets-react：

npm install @grapecity/spread-sheets-react

将SpreadJS CSS导入index.js文件
接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

在React应用程序中使用SpreadJS
现在，您可以根据需要修改App.js文件。刷新浏览器窗口时，更改将反映出来。例如，您可以使用下面给出的示例代码：

                            import React, { Component } from 'react';
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
import GC from '@grapecity/spread-sheets';
var SpreadJSKey = "xxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;
class APP extends Component {
constructor(props) {
super(props);
this.spreadBackColor = 'aliceblue';
this.sheetName = 'Goods List';
this.hostStyle =
{
width: '800px',
height: '600px'
};
this.data = [{ Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },{ Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other' },{ Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },{ Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
];
this.columnWidth = 100;
}
render() {
return (
<div>
<SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}>
<Worksheet name={this.sheetName} dataSource={this.data}>
<Column dataField='Name' width={300}></Column>
<Column dataField='Category' width={this.columnWidth}></Column>
<Column dataField='Price' width={this.columnWidth}
formatter="$#.00"></Column>
<Column dataField='Shopping Place' width={this.columnWidth}></Column>
</Worksheet>
</SpreadSheets>
</div>
)
}
}
export default APP

使用传统HTML

此方法涉及以下步骤：

下载React HTML模板
您可以使用链接//reactjs.org/docs/getting-started.html下载react HTML模板。
将SpreadJS和React-SpreadJS添加到HTML模板
添加对gc.spread.sheets.all。*。*。*。min.js，gc.SpreadJS。*。*。*。css和gc.spread.sheets.react。*。*。*。js 文件的引用在HTML模板中（即您的index.html文件）。
在React应用程序中使用SpreadJS
现在，您可以在您的react应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：

                            <!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8" />
     <title>Hello World</title>
     <script src="//unpkg.com/react@16/umd/react.development.js"></script>
     <script src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="//unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
     <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
     <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
class App extends React.Component{
    render(){
      return(
         <div style={{width: '800px',height: '600px'}}>
           <SpreadSheets>
            <Worksheet name='first'
            <Column dataField="Name"/>
             </Worksheet>
             </SpreadSheets>
             </div>
             )
         }
     }
     ReactDOM.render(
             <App/>,
         document.getElementById('root')
          ); 
</script>
</body>
</html>

SpreadSheets，Worksheet和Column是具有标签层次结构的基本元素。其他元素通过设置来起作用。主要标签层次为：

今天的内容就到这了，不要忘了在评论区留下的意见和建议！现电子表格控件SpreadJS正版授权限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！

标签：

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

文章转载自：

上一篇：WPF界面开发工具DevExpress WPF使用教程：创建简单的未绑定3D图表（第一部分）下一篇：Intellij Idea最新版本预告：全新的开始界面，对密封类的全面支持等