SpreadJSへのファイルのインポート

次のセクションは、Excel（.xlsx）およびJSONファイル（jsonまたはssjson）をSpreadJSにインポートする手順について説明します。

SpreadJSのAPIに加えて、次のメソッドも使用されます。

手順1：HTMLにExcelIOのスクリプトファイルへの参照を追加する

HTMLのHEADタグにExcelIOのスクリプトファイルへの参照を追加し、ExcelIOのインスタンスを生成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- a) SpreadJSスクリプトとCSSを追加します。-->
    <!-- a1) SpreadJSスクリプトファイルを追加します。-->
    <script type="text/javascript"
            src="SpreadJS\gc.spread.sheets.all.x.x.x.min.js"></script>
    <!-- a2) CSSファイルを追加します。-->
    <link href="SpreadJS\gc.spread.sheets.x.x.x.css"
          rel="stylesheet"
          type="text/css" />
    <!-- d1) ExcelIOスクリプトファイルを追加します。-->
    <script type="text/javascript"
            src="SpreadJS\gc.spread.excelio.x.x.x.min.js"></script>
    <style>
        .spread-container {
            height: 550px;
        }
    </style>
</head>
<body>
    <h1>SpreadJSへのファイルのインポート</h1>
    <div class="sample-container">
        <!-- b) SpreadJSのターゲットDOM要素を作成します。-->
        <div id="ss" class="spread-container"></div>
    </div>
</body>
<script>
    // c) divの「ss」IDでスプレッドコンテナのSpreadJSを初期化します。
    window.onload = function ()
    {
        var spread = new GC.Spread.Sheets.Workbook(
            document.getElementById( "ss" ),
            { sheetCount: 1 }
        );

        // d2) ExcelIOのインスタンスを生成します。
        excelIO = new GC.Spread.Excel.IO();
    };
</script>
</html>

手順2：JSON文字列からスプレッドのインスタンスをロードする

importJSON 関数を作成して、 fromJSON メソッドを使用して指定されたJSON文字列からSpreadインスタンスをロードします。

focus メソッドを使用して、ワークブックコンポーネントにフォーカスします。

//2: importJSON()を作成します。
function importJSON(spreadJson) {
    var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
    if (spreadJson.version && spreadJson.sheets) {
        // JSON文字列spreadJSONからオブジェクトをロードします。
        ss.fromJSON(spreadJson);
        // ブックコンポーネントをフォーカスします。
        ss.focus();
    }
}

手順3：Excelファイルをインポートする

importSpreadFromExcel 関数を作成し、 excelIO.open メソッドを呼び出して、ExcelファイルをJSON文字列に変換してインポートします。

importJSON 関数を呼び出して、 excelIO.open メソッドで作成されたJSONデータ文字列からSpreadJSのインスタンスをロードします。

//3: importSpreadFromExcel()を作成します。
function importSpreadFromExcel(file, options) {
    // ExcelファイルをロードしてSpreadJSインスタンスを描画します。
    excelIO.open(
        file,
        function (json) {
            // 手順1で作成したimportJson()を呼び出して、Excelファイルをインポートします。
            importJSON(json);
        },
        function (e) {
            console.log(e);
        },
        options
    );
}

手順4：JSONファイルをSpreadJSのインスタンスにインポートする

importSpreadFromJSON 関数を作成して、JSONファイルをインポートします。
新しい FileReader を作成し、「reader」変数に保存します。
FileReader.readAsText 関数を使用して、JSONファイルの内容を文字列に読み取ります。 onloadイベントは、FileReaderが終了した後にトリガーされます。

importSuccessCallback メソッドを呼び出して、 JSON.parse メソッドを使用して結果をJavaScriptオブジェクトに解析します。

//4: importSpreadFromJSON()を作成します。
function importSpreadFromJSON(file) {
    function importSuccessCallback(responseText) {
        // JSON文字列を解析します。
        var spreadJson = JSON.parse(responseText);
        // importJSONメソッドを実行して、解析されたJSON文字列からSpreadJSインスタンスをロードします。
        importJSON(spreadJson);
    }
    // JSON文字列を読み取るファイルを作成します。
    var reader = new FileReader();
    // 以下のreadAsText() が終了すると、このイベントがトリガーされ、正常なコールバックが返されます。
    reader.onload = function () {
        importSuccessCallback(this.result);
    };
    // readAsText()メソッドをトリガーします
    // これによりファイルの内容が読み取られ、完了するとロードイベントがトリガーされます。
    reader.readAsText(file);
    return true;
}

手順5：インポートされたファイルの形式を決定する

importFile 関数を作成して、インポートされたファイルのファイル名をパラメーターとして受け取り、ファイル名の最後の「.」のインデックスを見つけることによってファイルタイプ（ExcelまたはJSON）を決定します。

If/Elseステートメントを作成して、 importSpreadFromJSON 関数と importSpreadFromExcel 関数のどちらを使用してファイルをインポートするかを決定します。

//5: importFile()関数を作成して、ファイルが.xlsxであるか.JSON /.SSJSONであるかを判別します
function importFile(file) {
    // 選択されたファイルの名前を取得します。
    var fileName = file.name;
    // ファイル名の最後の「.」のインデックス位置を取得します
    var index = fileName.lastIndexOf(".");
    // ファイル名の最後の部分を返します。
    var fileExt = fileName.substr(index + 1).toLowerCase();
    if (fileExt === "json" || fileExt === "ssjson") {
        importSpreadFromJSON(file);
    } else if (fileExt === "xlsx") {
        importSpreadFromExcel(file);
    }
}

手順6：HTML入力要素を追加する

HTMLにid fileSelector でファイル入力要素を追加し、HTML入力を使用してファイルが選択されたときに、 importFile 関数を実行する processFileSelected 関数を作成します。

<body>
    <h1>SpreadJSへのファイルのインポート</h1>
    <!-- e) ファイル入力要素を追加します。-->
    <p>ファイルのインポート：<input id="fileSelector" type="file" onchange="processFileSelected()"></p>
    <div class="sample-container">
        <!-- b) SpreadJSのターゲットDOM要素を作成します。-->
        <div id="ss" class="spread-container"></div>
    </div>
</body>

//6: processFileSelected()を作成します。
function processFileSelected() {
    // idfileSelectorを持つHTML入力から選択されたファイルを取得します。
    var fileSelector = document.getElementById("fileSelector");
    var file = fileSelector.files[0];
    if (!file) return false;
    fileSelector.innerHTML = "";
    // importFile()ファイルが選択されたら、importFile()を実行します。
    return importFile(file);
}

上記の手順に従うと、以下のような出力が生成されます。

Excelファイルのインポート

JSONファイルのインポート