點擊“了解更多”獲取SpreadJS v14.0正式版下載

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

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

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

還不清楚 npx？ 請點擊這裡了解一下《What Isnpx》。

cd react-spread-sheets

npm start

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

2. 導入 Spread.Sheets React 組件（耗時 30 S）

js npm install @grapecity/spread-sheets-react

如果您需要 excel 導入/導出、chart 圖表、打印或者 pdf 導出功能，可以選擇導入相應的 SpreadJS 組件，具體請點擊這裡查看。

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

導入Spread.Sheets

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

添加構造器

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

添加模闆

<div style={this.hostStyle}> <SpreadSheets workbookInitialized={this.workbookInitialized}></SpreadSheets> </div>

4.啟動 Npm（耗時 1 Min）

workbookInitialized 是 spread 初始化完成後的回調事件，我們可以在事件中得到初始化好的 workbook 對象。

添加部署授權需要同時給 Sheets 和 ExcelIO 同時添加，部署授權可以在全局 config 中配置。

隻需 3 分鐘，一個 SpreadJS 的 React 項目就創建完成了，當然純前端表格控件 SpreadJS 的強大不僅于此，去實際試用感受一下吧！

本文轉載自葡萄城