Excel IO要素

Excel IO要素を使用すると、Excelファイルのインポートおよびエクスポート機能を簡単に実現できます。

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モジュールをインストールする

   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. プロジェクトでExcel IO ReactモジュールとFileSaver Reactモジュールをインストールする

   次のコマンドを使用して、Excel I/Oおよびfile-saverモジュールをプロジェクトにインストールします。

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

   
   

5. ReactアプリでExcel IOを使用する

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

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

   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;