在React、Vue和Angular中使用SpreadJS

本文由葡萄城技术团队于 SegmentFault 葡萄城问答子站 原创并首发

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

Angular简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 Javascript框架。它是一个以 Javascript 编写的库。它可通过

在这个页面中，我们将使用 Babel 的预编译版本（称为 babel-standalone），因此我们也会添加一个对此的引用：

最后，添加对 Spread.Sheets 的引用：

在我们编写任何脚本之前，我们需要定义一个 DIV 元素来包含 Spread 实例。我们称之为 “root”。

第2步：为 Spread.Sheets 创建一个 React 类

接下来，在页面中添加一个脚本元素。我们将把所有的代码放在这里：

然后，为 Spread.Sheets 定义一个 React 组件，以便我们可以定义一个扩展 React.Component 的类：

class ReactSpreadJS extends React.Component{
}


该类需要在其中定义 componentDidMount 和 render 函数。componentDidMount 函数在组件被挂载后立即被调用，所以我们用它来初始化 Spread 实例：

componentDidMount() {
//In the DidMount life cycle, we initialize Spread Sheet instance, and the host is defined in the Component template.
let spread = new GC.Spread.Sheets.Workbook(this.refs.spreadJs, {sheetCount: 3});
if(this.props.workbookInitialized){
this.props.workbookInitialized(spread);
}
}

接下来，在渲染函数中定义 Spread.Sheets DOM 元素：

render() {
//Define the Spread.Sheets DOM template
return(


第3步：为组件创建一个应用程序类

首先，通过 App 类定义应用程序 React 组件：

//Define the application react component.
class App extends React.Component{ }


接下来，添加一个您将调用 ReactSpreadJS 组件的渲染函数：

render(){
//In the root component, it include one ReactSpreadJS component.
return(


要完成脚本，请告诉 React 通过使用 ReactDOM.render 来初始化应用程序：

ReactDOM.render(
//Main entry, initialize application react component.
,
document.getElementById('root')
);


这就是使用 React 将 Spread.Sheets 添加到 HTML 页面所需的全部内容。这只是 React 和 Spread.Sheets 的基本使用，但可以轻松扩展。

在Vue中使用SpreadJS

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

1. 使用Nuget Package Manager(NPM)
2. 使用传统HTML

使用Nuget Package Manager(NPM)

此方法包括以下步骤：

1、 创建一个Vue项目

打开命令提示符窗口并键入以下命令，以便使用vue init webpack创建一个简单的Vue项目。

$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm run dev

完成后，将在目录中的指定位置创建Vue项目。有关如何创建Vue项目的更多信息，请参阅https://vuejs.org/v2/guide/in&＃8230;。

2、 在项目中导入SpreadJS Vue模块

接下来，您需要使用以下命令在项目中安装 @ grapecity / spread-sheets-vue：

$ npm install @ grapecity / spread-sheets-vue

3、 在Vue应用程序中使用SpreadJS

现在，您可以根据您的要求修改App.vue文件。刷新浏览器窗口时将反映更改。例如，您可以使用下面给出的示例代码：

使用传统HTML

此方法包括以下步骤：

1、 创建一个HTML页面

作为第一步，您需要创建一个HTML页面。

2、 将SpreadJS和Vue-Spread.Sheets添加到HTML模板

添加对gc.spread.sheets.all。。。。min.js，gc.spread.sheets。。。。css和gc.spread.sheets.vue。。。*的引用。 HTML模板中的js文件（即index.html文件）。

3、 在Vue应用程序中使用SpreadJS

现在，您可以在Vue应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：

SpreadJS 中的 SpreadSheets，Worksheet和Column是具有标记层次结构的基本元素。其他元素通过设置它们来工作。主标记层次结构是：




...

...


本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

了解纯前端控件集，请前往 WijmoJS全面支持Angular、React和Vue的全功能控件集

了解可嵌入您系统的在线Excel，请前往 SpreadJS纯前端表格控件