概要概要
SpreadJSの純粋なフロントエンドテーブルコントロールV11.2（SP2）は、Reactの拡張を完全にサポートしています。次に、SpreadJSReactプロジェクトを3分ですばやく作成する方法を見てみましょう。
1.新しいReactプロジェクトを作成します（1分）
直接実行：npx create-react-app react-spread-sheets
npxについてよくわかりませんか？「WhatIsnpx」については、ここをクリックしてください。
cdreact-spread-sheets
海抜スタート
効果を確認するには、http：// localhost：3000にアクセスしてください
2. Spread.Sheets Reactコンポーネントをインポートします（時間のかかる30秒）
js npm install @ grapecity / Spread-sheets-react
Excelのインポート/エクスポート、チャート、印刷、またはpdfエクスポート機能が必要な場合は、対応するSpreadJSコンポーネントのインポートを選択できます。詳細については、ここをクリックして表示してください。
3. Spread.Sheets要素をページに追加します（時間のかかる30秒）
Spread.Sheetsをインポートする
import {SpreadSheets、Worksheet、Column} from '@ grapecity / Spread-sheets-react';
import '@ grapecity / Spread-sheets / styles / gc.spread.sheets.excel2016colorful.css';
コンストラクターを追加する
コンストラクター（小道具）{
スーパー（小道具）;
this.hostStyle =
{
左： "20px"、
右： "20px"、
位置： "絶対"、
textAlign： "左"
};
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分）
workbookInitializedは、スプレッドの初期化が完了した後のコールバックイベントであり、イベントで初期化されたワークブックオブジェクトを取得できます。
展開承認の追加は、SheetsとExcelIOに同時に追加する必要があります。展開承認はグローバル構成で構成できます。
SpreadJS Reactプロジェクトを作成するのに3分しかかかりません。もちろん、純粋なフロントエンドテーブルコントロールSpreadJSのパワーはそれだけではありません。試してみて、体験してみましょう。
純粋なフロントエンドテーブルコントロールSpreadJSは、Web Excelコンポーネント開発、データ入力、オンラインドキュメント、グラフ式のリンク、.NET、Java、AppなどのアプリケーションでのExcelのようなUIデザインなどのビジネスシナリオに対応できます。データの視覚化とExcelでのエクスポート、数式参照、データバインディング、フレームワークの統合には、多くのコード開発とテストが必要ないため、企業のR＆Dコストとプロジェクト配信のリスクが大幅に削減されます。
この記事はから再生されたブドウ市