SpreadJS v14.0 official version download
Overview
SpreadJS pure front-end table control V11.2 (SP2) has fully supported the expansion of React. Next, let's see how to quickly create a SpreadJS React project in 3 minutes.
1. Create a new React project (1 Min)
Run directly: npx create-react-app react-spread-sheets
Not sure about npx? Please click here to learn about " What Isnpx ".
cd react-spread-sheets
above sea level start
Visit http://localhost:3000 to view the effect
2. Import Spread.Sheets React component (time-consuming 30 S)
js npm install @grapecity/spread-sheets-react
If you need excel import/export, chart, print or pdf export functions, you can choose to import the corresponding SpreadJS components. For details, please click here to view.
3. Add Spread.Sheets element to the page (time-consuming 30 S)
Import Spread.Sheets
import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
Add constructor
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());
}
}
Add template
<div style={this.hostStyle}>
<SpreadSheets workbookInitialized={this.workbookInitialized}></SpreadSheets>
</div>
4. Start Npm (1 Min)
workbookInitialized is the callback event after spread initialization is completed, we can get the initialized workbook object in the event.
Adding deployment authorization needs to be added to Sheets and ExcelIO at the same time. Deployment authorization can be configured in the global config.
It only takes 3 minutes to create a SpreadJS React project. Of course, the power of the pure front-end table control SpreadJS is not only that, let’s try it out and experience it!
The pure front-end table control SpreadJS can meet business scenarios such as Web Excel component development, data filling, online documents, chart formula linkage, and Excel-like UI design in applications such as .NET, Java, and App, and import and export in data visualization and Excel , Formula reference, data binding, and framework integration do not require a lot of code development and testing, which greatly reduces enterprise R&D costs and project delivery risks.
This article is reproduced from Grape City