只需3分鐘，就能輕松創(chuàng)建一個SpreadJS的React項目-創(chuàng)新互聯(lián)

概述

SpreadJS 純前端表格控件  V11.2(SP2) 已經(jīng)全面支持了  React  的拓展。接下來我們看下如何利用3分鐘快速創(chuàng)建一個 SpreadJS 的 React 項目。

創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為辰溪企業(yè)提供專業(yè)的做網(wǎng)站、成都網(wǎng)站制作，辰溪網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

1.新建React 項目（耗時 1 Min）

直接運行：npx create-react-app react-spread-sheets

還不清楚什么是npx？請點擊這里了解一下《 What Is npx ?》

cd react-spread-sheets
npm start

訪問 http://localhost:3000 查看效果

2.導(dǎo)入 Spread.Sheets React 組件（耗時 30 S）

npm install @grapecity/spread-sheets-react

如果您需要 excel 導(dǎo)入/導(dǎo)出、chart 圖表、打印或者 pdf 導(dǎo)出功能，可以選擇導(dǎo)入相應(yīng)的SpreadJS組件， 具體請查看https://www.npmjs.com/~grapecity。

3.頁面添加 Spread.Sheets 元素（耗時 30 S）

導(dǎo)入Spread.Sheets

import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';

添加構(gòu)造器

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());
}
}

添加模板