React

SpreadJS では、React アプリ開発環境にて、個別のモジュールとプラグインの両方の使用がサポートされます。

モジュールとプラグインをの使用

次の手順を実行します。

1. React アプリを作成する

   コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

   npx create-react-app my-app
   cd my-app 
   npm start

   コマンドを実行すると、ディレクトリ内の指定の場所にReactプロジェクトが作成されます。Reactプロジェクトの詳しい作成方法については、「https://create-react-app.dev/docs/getting-started/」を参照してください。

2. SpreadJS モジュールとプラグインをインストールする

   次のコマンドを使用して、SpreadJS の NPM モジュールとプラグインをインストールします。

   npm run eject
   npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print @mescius/spread-sheets-react

3. React アプリで SpreadJS を使用する

   App.jsファイルで、次のサンプルコードを使用します。

   ブラウザを更新すると、変更が表示されます。

   import "@mescius/spread-common";
   import "@mescius/spread-calc-engine";
   import "@mescius/spread-sheets-core";
   import "@mescius/spread-sheets-calc-engine";
   import "@mescius/spread-sheets-print";
   import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
   import './App.css';
   import '../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   function App() {
       let initSpread = function (value) {
           let spread = window.spread = value;
           let sheet = spread.getActiveSheet();
           sheet.setValue(0, 0, "Hello SpreadJS");
       }
       let printSpread = function () {
           let spread = window.spread;
           spread.print();
       }
       return (<div className="sample-tutorial">
           <div className="sample-spreadsheets">
               <SpreadSheets workbookInitialized={spread => initSpread(spread)}>
                   <Worksheet></Worksheet>
               </SpreadSheets>
           </div>
           <div id="testButton" onClick={() => printSpread()}>Print</div>
       </div>);
   }
   export default App;

   App.cssファイルで、次のサンプルコードを使用します。

   .sample-tutorial {
       position: relative;
       height: 400px;
       overflow: hidden;
   } 
   .sample-spreadsheets {
       width: 100%;
       height: 300px;
   }
   body {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   } 
   #testButton {
       margin-top: 10px;
       text-align: center;
       width: 100px;
       height: 30px; 
       border: 1px solid gray; 
       background-color: lightblue;
   }

   web.config.js ファイルで、次のエイリアスを追加します。

   .....
   alias:{
      "@mescius/spread-sheets": require.resolve("@mescius/spread-common"),
      .......
   }
   .....