このトピックでは、SpreadJSをブラウザに表示する方法について説明します。
SpreadJSを使用したWebアプリケーションに必要な最低限のファイルは製品パッケージに含まれる以下のファイルです。
|
フォルダ |
ファイル名 |
説明 |
|
SpreadJS/css |
gc.spread.sheets.x.x.x.css |
SpreadJSのスタイル設定に使用されるCSSルールが含まれています。適用するExcelテーマに応じて参照するcssファイルを変更します。 |
|
SpreadJS/scripts |
gc.spread.sheets.all.x.x.x.min.js |
SpreadJSの基本機能を定義したスクリプトファイルです。 |
また、使用する機能や言語に応じて、以下のファイルを参照に追加する必要があります。
|
フォルダ |
ファイル名 |
機能 |
|
SpreadJS/scripts/resources/ja |
gc.spread.sheets.resources.ja.x.x.x.min.js |
日本語リソース |
|
SpreadJS/scripts/interop |
gc.spread.excelio.x.x.x.min.js |
Excel入出力 |
|
SpreadJS/scripts/plugins |
gc.spread.pivot.pivottable.x.x.x.min.js |
ピボットテーブル |
|
SpreadJS/scripts/plugins |
gc.spread.sheets.barcode.x.x.x.min.js |
バーコード |
|
SpreadJS/scripts/plugins |
gc.spread.sheets.charts.x.x.x.min.js |
チャート |
|
SpreadJS/scripts/plugins |
gc.spread.sheets.shapes.x.x.x.min.js |
シェイプ |
|
SpreadJS/scripts/plugins |
gc.spread.sheets.pdf.x.x.x.min.js |
PDF出力 |
|
SpreadJS/scripts/plugins |
gc.spread.sheets.print.x.x.x.min.js |
PDF出力、印刷 |
|
SpreadJS/scripts/plugins |
gc.spread.calcengine.languagepackages.x.x.x.min.js |
計算用言語パッケージ |
より細かい機能単位のサブライブラリを参照することで、特定の機能のみロードすることも可能です。サブライブラリの詳細については「SpreadJSライブラリ」を参照してください。
リボンコンテナ使用時に必要となるファイルはこちらを参照してください。
製品パッケージに含まれる必要なファイルを、アプリケーション内のフォルダにコピーします。コピーしたファイルを参照するため、scriptタグ内にコピーしたファイルへのパスを指定してHTMLページに追加します。
| HTML |
コードのコピー
|
|---|---|
<!-- CSSファイル --> <link href="css/gc.spread.sheets.x.x.x.min.css" rel="stylesheet"/> <!-- SpreadJS スクリプトファイル --> <script src="scripts/gc.spread.sheets.sheets.all.x.x.x.min.js"></script> <!-- リソースファイル（オプション。必要なカルチャーを含める） --> <script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js"></script> <!-- SpreadJS機能（オプション。必要な機能を含める） --> <script src="scripts/plugins/gc.spread.pivot.pivottables.x.x.x.min.js"></script> <script src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js"></script> |
|
SpreadJSはnpmを利用してインストールすることができます。@grapecity/spread-sheetsおよび@grapecity/spread-sheets-resources.jaパッケージをプロジェクトにインストールし、スタイルとJSライブラリを参照します。
コマンドラインから次のコマンドを実行すると、SpreadJSの最新版をnpmからインストールできます。
npm install @grapecity/spread-sheets次のようにimport文を記述します。
| JavaScript |
コードのコピー
|
|---|---|
// SpreadJSスクリプトファイル import * as GC from '@grapecity/spread-sheets'; // リソースファイル import '@grapecity/spread-sheets-resources-ja'; // SpreadJS機能（オプション。必要な機能を含める） import '@grapecity/spread-sheets-pivots'; import '@grapecity/spread-sheets-charts'; |
|
前項のように必要なスタイルとJSライブラリの参照を設定し、ホスト要素をアプリケーションに追加し、それにIDを指定します。これを、SpreadJSとして初期化します。
| HTML |
コードのコピー
|
|---|---|
<div id="ss" style="height:550px"></div> |
|
| JavaScript |
コードのコピー
|
|---|---|
GC.Spread.Sheets.LicenseKey = "xxxxxxxx"; var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); |
|
| JavaScript |
コードのコピー
|
|---|---|
GC.Spread.Sheets.LicenseKey = "xxxxxxxx"; var spread = new GC.Spread.Sheets.Workbook("ss"); |
|
| HTML |
コードのコピー
|
|---|---|
<head> <link href="css/gc.spread.sheets.x.x.x.min.css" rel="stylesheet"/> <script src="scripts/gc.spread.sheets.sheets.all.x.x.x.min.js"></script> <script src="scripts/resources/ja/gc.spread.sheets.resources.ja.xx.x.x.min.js"></script> </head> <body> <!-- SpreadJSのホスト要素を作成します。--> <div id="ss" style="height:550px"></div> </body> <script> window.onload = function () { // ライセンスキーを設定します GC.Spread.Sheets.LicenseKey = "xxxxxxxx"; // SpreadJSを初期化します var spread = new GC.Spread.Sheets.Workbook("ss"); // または、以下のコードでも初期化可能です // var spread = new GC.Spread.Sheets.Workbook("ss"); }; </script> |
|