SpreadJS製品ヘルプ
SpreadJSへのファイルのインポート
はじめに > クイックスタート > SpreadJSへのファイルのインポート

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

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

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

  1. HTMLのHEADタグにExcelIOのスクリプトファイルへの参照を追加し、ExcelIOのインスタンスを生成します。
    HTML
    コードのコピー 
    <!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文字列からスプレッドのインスタンスをロードする

  1. importJSON関数を作成して、fromJSONメソッドを使用して指定されたJSON文字列からSpreadインスタンスをロードします。
  2. focusメソッドを使用して、ワークブックコンポーネントにフォーカスします。
    Javascript
    コードのコピー 
    //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ファイルをインポートする

  1. importSpreadFromExcel関数を作成し、excelIO.openメソッドを呼び出して、ExcelファイルをJSON文字列に変換してインポートします。
  2. importJSON関数を呼び出して、excelIO.openメソッドで作成されたJSONデータ文字列からSpreadJSのインスタンスをロードします。
    Javascript
    コードのコピー 
    //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のインスタンスにインポートする

  1. importSpreadFromJSON関数を作成して、JSONファイルをインポートします。
  2. 新しいFileReaderを作成し、「reader」変数に保存します。
  3. FileReader.readAsText関数を使用して、JSONファイルの内容を文字列に読み取ります。 onloadイベントは、FileReaderが終了した後にトリガーされます。
  4. importSuccessCallbackメソッドを呼び出して、JSON.parseメソッドを使用して結果をJavaScriptオブジェクトに解析します。
    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：インポートされたファイルの形式を決定する

  1. importFile関数を作成して、インポートされたファイルのファイル名をパラメーターとして受け取り、ファイル名の最後の「.」のインデックスを見つけることによってファイルタイプ（ExcelまたはJSON）を決定します。
  2. If/Elseステートメントを作成して、importSpreadFromJSON関数とimportSpreadFromExcel関数のどちらを使用してファイルをインポートするかを決定します。
    JavaScript
    コードのコピー 
    //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関数を作成します。

HTML
コードのコピー 
<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>
JavaScript
コードのコピー 
//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ファイルのインポート


 

 

Copyright © 2016 GrapeCity inc. All rights reserved.