Excel IO要素

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

Reactアプリを作成する

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

コマンドプロンプト	コードのコピー
npm install -g create-react-app create-react-app quick-start cd quick-start npm start

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

Spread.Sheetsモジュールをインストールする

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

コマンドプロンプト	コードのコピー
npm install @grapecity/spread-sheets npm install @grapecity/spread-sheets-react npm install @grapecity/spread-sheets-resources-ja

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

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

index.js	コードのコピー
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

プロジェクトでExcel IO ReactモジュールとFileSaver Reactモジュールをインストールする

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

コマンドプロンプト	コードのコピー
npm install @grapecity/spread-excelio npm install file-saver --save

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

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

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

App.js	コードのコピー
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;

App.js

コードのコピー

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;