Shape要素

ReactでShape要素を使用すると、ワークシートに正方形、円、長方形、三角形、五角形、六角形、八角形などのような幾何学的シェイプをすばやく簡単に埋め込んでレンダリングできます。

1. Reactアプリを作成する

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

   npm install -g create-react-app
   create-react-app quick-start
   cd quick-start
   npm start

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

   
   

2. プロジェクトにSpread.Sheets Reactモジュールをインストールする

   Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。

   npm install @grapecity/spread-sheets
   npm install @grapecity/spread-sheets-react
   npm install @grapecity/spread-sheets-resources-ja

3. スタイルをインポートする

   index.jsファイルで、スタイルファイルをインポートします。```

   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

   
   

4. プロジェクトでシェイプのReactモジュールをインストールする

   次のコマンドを使用して、プロジェクトにシェイプのモジュールをインストールする必要があります。

   npm install @grapecity/spread-excelio
   npm install file-saver --save

   
   

5. Reactアプリケーションでチャートを使用する

   必要に応じてApp.jsファイルを変更できます。 ブラウザウィンドウが更新されると、変更が反映されます。次のサンプルコードを使用します。

   次のサンプルコードは、Reactアプリケーションでシェイプを使用する方法を示します。

   import React from 'react';
   import './App.css';
   import GC from '@grapecity/spread-sheets';
   import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';
   
   // ExcelIOモジュールをインポートします。
   import * as ExcelIO from "@grapecity/spread-excelio";
   
   // file-saverモジュールをインポートします。
   import saveAs from 'file-saver';
   var SpreadJSKey = "xxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   // 同じライセンスキーを使用して、Excel IOモジュールのライセンスを個別に取得する必要があります。
   ExcelIO.LicenseKey = SpreadJSKey;
   class App extends React.Component {
       constructor(props) {
           super(props);
           this.hostStyle =
               {
                   width: '1100px',
                   height: '800px'
               };
       }
   
   // ワークブックのinitializedイベントを処理します。
       workbookInit = (spread) => {
           this.setState({
               spread: spread
           });
       }
   // Excelをインポートします。
       importFile = () => {
           var excelFile = document.getElementById("fileDemo").files[0];
           // IOクラスのインスタンスを取得します。
           let excelIO = new ExcelIO.IO();
           excelIO.open(excelFile, (json) => {
               this.state.spread.fromJSON(json);
           }, (e) => {
               console.log(e);
           });
       }
   // Excelをエクスポートします。
       exportFile = () => {
           // IOクラスのインスタンスを取得します。
           let excelIO = new ExcelIO.IO();
           let fileName = document.getElementById("exportFileName").value;
           if (fileName.substr(-5, 5) !== '.xlsx') {
               fileName += '.xlsx';
           }
           var json = JSON.stringify(this.state.spread.toJSON());
           excelIO.save(json, (blob) => {
               saveAs(blob, fileName);
           }, (e) => {
               console.log(e);
           });
       }
       render() {
           return (
               <div>
                   <input type="file" name="files[]" id="fileDemo" accept=".xlsx" />
                   <input type="button" id="loadExcel" value="Import" onClick={this.importFile} />
                   <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} />
                   <input type="text" id="exportFileName" placeholder="エクスポートするファイルの名前。" value="export.xlsx" />
                   <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
                       <Worksheet>
                       </Worksheet>
                   </SpreadSheets>
               </div>
           )
       }
   }
   export default App;