Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

You can easily create a React entry for SpreadJS in just 3 minutes

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Internet Technology >

Share

Shulou(Shulou.com)06/03 Report--

Overview

SpreadJS pure front-end table control V11.2 (SP2) has fully supported the expansion of React. Next, let's take a look at 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

It is not clear what npx is. Please click here to learn about "What Is npx?"

Cd react-spread-sheetsnpm start

Visit http://localhost:3000 to view the effect

two。 Import Spread.Sheets React components (30 s)

Npm install @ grapecity/spread-sheets-react

If you need excel import / export, chart chart, print, or pdf export capabilities, you can choose to import the appropriate SpreadJS component, see https://www.npmjs.com/~grapecity for details.

3. Add Spread.Sheets elements to the page (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 templat

Start Npm (1 Min in time)

WorkbookInitialized is a callback event after spread initialization is completed, in which we can get the initialized workbook object.

Adding deployment authorization needs to be added to both Sheets and ExcelIO, and deployment authorization can be configured in the global config.

It takes only 3 minutes to create a React project for SpreadJS. Of course, the power of SpreadJS, a pure front-end table control, is more than that. Try it in practice.

About the city of grapes:

Empowered developer! Founded in 1980, Grape City is the world's leading software and service provider integrating development tools, business intelligence solutions, and management system design tools. Xi'an Grape City is its branch in China, providing software research and development services to the global market, and providing international advanced development tools, software and R & D consulting services for the informatization of Chinese enterprises. Grape City's controls and software products have won many awards at home and abroad, and have been widely used by hundreds of thousands of enterprises, schools and government agencies around the world.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 260

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Internet Technology

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report