「SpreadJS（スプレッドJS）」は、WebシステムのフロントエンドでExcelやGoogleスプレッドシートのような機能を簡単に実現できるJavaScriptライブラリです。今回の記事ではSpreadJSに搭載された書式設定機能の特徴や用法をご紹介します。
Excel資産をそのまま活用できるインポート機能
脱Excelを目指しシステム化に成功しても、業務とExcelとのつながりをゼロにできない場合があります。それは例えば新システムへのデータ移行にあたり過去のExcelファイルを閲覧しなければならなかったり、あるいはシステムを使用しない外部の関係者からExcelファイルでデータが届いたりといったケースで、このような状況が起きると結局、システムと同時にExcelを立ち上げることになってしまいます。
SpreadJSのExcelファイルインポート機能はこのような場合に大変有効です。同機能を活用すればシステムのみでExcelファイルを開いて閲覧したり、その内容を取り込んだりすることが可能になります。
基本的な使い方
SpreadJSを使ったExcelファイルのインポートでは下記に示すimportメソッドを利用します。
// SpreadJSを初期化します
var spread = new GC.Spread.Sheets.Workbook('ss');
// Excelインポートを実行します
spread.import(file, successCallBack, errorCallBack, options);このメソッドに設定できるパラメータは以下の通りです。
| パラメータ | 機能 |
|---|---|
| file | インポート対象のExcelファイル。Blob形式、もしくはHTML標準のFILE APIで定義されるFILEオブジェクトでパラメータを設定できます。 |
| successCallBack | ファイルのロードが成功した場合に実行されるコールバック関数を設定します。 |
| errorCallBack | ファイルのロードが失敗した場合に実行されるコールバック関数を設定します。 |
| options | ファイルのインポートに関するオプション。インポートするファイルの種別ほか、様々なオプションを指定できます。 |
例えば以下はimportメソッドとHTML標準のINPUT要素を組み合わせ、ローカル環境からのExcelファイルインポートを実現する例です（“Run Project”をクリックするとデモが起動します）。
任意のExcelファイルを用意の上、［ファイルを選択］ボタンをクリックして表示されるダイアログから選択し、［インポート］ボタンをクリックすることでSpreadJSへのExcelファイルインポートを確認できます。
上記のデモでは、importメソッドのoptions引数としてファイル種別のみを指定していますが、状況に応じて以下のように様々なオプションを設定することが可能です。
| オプション | 機能 |
|---|---|
| fileType | ファイルの種類を指定します。Excelファイルをインポートする場合はGC.Spread.Sheets.FileType.excelを設定します。 |
| includeStyles | インポートにスタイルを含めるかどうかを設定します。 |
| includeFormulas | インポートに数式を含めるかどうかを設定します。 |
| frozenColumnsAsRowHeaders | 固定列を行ヘッダーとしてインポートするかどうかを設定します。 |
| frozenRowsAsColumnHeaders | 固定行を行ヘッダーとしてインポートするかどうかを設定します。 |
| fullRecalc | インポート後に数式の計算を実施するかどうかを設定します。 |
| dynamicReferences | インポート後に動的参照を使用して計算を実施するかどうかを設定します。 |
| calcOnDemand | 数式のオンデマンド計算を有効にするかどうかを設定します。 |
| includeUnusedStyles | インポートに未使用のスタイルを含めるかどうかを設定します。 |
| openMode | インポートにおけるモードを設定します。normal、lazy、incrementalの3種から設定可能です。 |
| progress | ファイルのインポート進捗を示すためのコールバック関数を設定します。 |
なお、インポート機能を利用するためにはSpreadJSの本体モジュールに加えて、ファイルの入出力機能を司るgc.spread.sheets.io.x.x.x.min.jsモジュールが必要なので、以下の様にして忘れずに参照を行ってください。
HTMLでの参照例
<html>
<head>
<!--SperadJS関連のCSSとライブラリファイルを参照します-->
<!--CSSファイル-->
<link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
<!--SpreadJS本体モジュールの参照-->
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<!--ファイル入出力用モジュールの参照-->
<script src="scripts/gc.spread.sheets.io.x.x.x.min.js"></script>
</head>
</html>npmからライブラリを参照する場合の例
// SpreadJS本体モジュールの参照
import * as GC from '@grapecity/spread-sheets';
// ファイル入出力用モジュールの参照
import '@grapecity/spread-sheets-io';サーバーにあるExcelファイルのインポートにも対応
上記ではローカル環境にあるExcelファイルをSpreadJSにインポートする例をご紹介しましたが、人手を介さず、サーバーなどに配置したExcelファイルをシステム上のSpreadJSにインポートしたい場合もあるかと思います。
その場合は以下の様にしてサーバーへデータをリクエストし、ExcelファイルをBlob形式データで取得の上、importメソッドに渡すことでネットワーク上にあるファイルのインポートを実現できます。
// SpreadJSのインスタンスを生成します
var workbook = new GC.Spread.Sheets.Workbook("ss");
// サーバー上にあるExcelファイルのURLを定義します
var excelUrl = "https://（Excelファイルが保存してあるサーバーのURL）/（ファイル名）.xlsx";
// XMLHttpRequestを作成し、リクエストの種別をblobに指定します
var oReq = new XMLHttpRequest();
oReq.open('get', excelUrl, true);
oReq.responseType = 'blob';
// リクエスト成功時の処理を定義します
oReq.onload = function () {
spread.import(
// XMLHttpRequestで取得したファイルを設定します
oReq.response,
// インポート成功時の処理
function () {
console.log('インポートに成功しました');
},
// インポート失敗時の処理
function (e) {
// エラーをアラート表示します
alert(e.errorMessage);
},
{
fileType: GC.Spread.Sheets.FileType.excel,
}
);
};
//リクエストを実行します
oReq.send();リボンコンテナを使用したインポート機能の利用
importメソッドのほか、SpreadJSに収録のコンポーネント「リボンコンテナ」を利用することでもExcelファイルのインポートを実現できます。
同コンポーネントはスプレッドシートのほか、Excelライクなリボンメニューや数式バー、ステータスバーなども備える便利なコンポーネントです。わずかな初期化処理さえ実装すれば、リボンメニューにある［ファイル］からのインポート機能が利用できるようになります（実装方法については上記の記事をご参照ください）。
インポート機能をデモで確認
今回はSpreadJSのインポート機能をご紹介しました。この機能を活用することでシステムとExcelファイルのスムーズな連携が可能になります。
弊社ウェブサイトでは同機能をより詳細に確認できる「チュートリアルデモ」も公開しています。気になった方はこちらも併せてご参照いただければ幸いです。
さいごに
弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版を公開しております。SpreadJSをご検討の方はこちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記にて、お気軽にお問合せください。