如何在报表spreadjs中集成第三方控件 React_react 集成第三方 href-CSDN博客

本文介绍了如何在React项目中使用SpreadJS，包括通过Node包管理器和传统HTML两种方法进行集成。详细步骤包括创建React项目、安装SpreadJS React模块、导入CSS并展示使用SpreadJS的示例代码。

摘要由CSDN通过智能技术生成

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模板
您可以使用链接https://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="https://unpkg.com/react@16/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="https://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元。点击了解更多优惠！