SpreadJS 純前端表格控件 V11.2(SP2) 已經(jīng)全面支持了 React 的拓展。接下來(lái)我們看下如何利用3分鐘快速創(chuàng)建一個(gè) SpreadJS 的 React 項(xiàng)目。
十余年建站經(jīng)驗(yàn)， 成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)客戶的見(jiàn)證與正確選擇。成都創(chuàng)新互聯(lián)公司提供完善的營(yíng)銷型網(wǎng)頁(yè)建站明細(xì)報(bào)價(jià)表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
1.新建React 項(xiàng)目（耗時(shí) 1 Min）
直接運(yùn)行：npx create-react-app react-spread-sheets
還不清楚什么是npx？請(qǐng)點(diǎn)擊這里了解一下《What Is npx?》
cd react-spread-sheets npm start
訪問(wèn) http://localhost:3000 查看效果
2.導(dǎo)入 Spread.Sheets React 組件（耗時(shí) 30 S）
npm install @grapecity/spread-sheets-react
如果您需要 excel 導(dǎo)入/導(dǎo)出、chart 圖表、打印或者 pdf 導(dǎo)出功能，可以選擇導(dǎo)入相應(yīng)的SpreadJS組件，具體請(qǐng)查看https://www.npmjs.com/~grapecity。
3.頁(yè)面添加 Spread.Sheets 元素（耗時(shí) 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());
}
}添加模板
