システム開発のための脱/活Excel術(6)インポート

Microsoft Excelを使った業務スタイル、システム化してさらに効率の良いものにしてみませんか。このシリーズでは高性能JavaScriptライブラリ「SpreadJS(スプレッドJS)」を使い、Excelの人気機能をアプリケーション上で実現する方法についてご紹介していきます。

Excel資産をそのまま活用できるインポート機能

脱Excelを目指しシステム化に成功しても、業務とExcelとのつながりをゼロにできない場合があります。それは例えば新システムへのデータ移行にあたり過去のExcelファイルを閲覧しなければならなかったり、あるいはシステムを使用しない外部の関係者からExcelファイルでデータが届いたりといったケースで、このような状況が起きると結局、システムと同時にExcelを立ち上げることになってしまいます。

SpreadJSのExcelファイルインポート機能はこのような場合に大変有効です。同機能を活用すればシステムのみでExcelファイルを開いて閲覧したり、その内容を取り込んだりすることが可能になります。

基本的な使い方

SpreadJSを使ったExcelファイルのインポートでは下記に示すopenメソッドを利用します。

// Excel入出力ライブラリのインスタンスを生成します
var excelio = new GC.Spread.Excel.IO();

// Excelインポートを実行します
excelio.open(file, successCallBack, errorCallBack, options);

このメソッドに設定できるパラメータは以下の通りです。

パラメータ機能
fileインポート対象のExcelファイル。Blob形式、もしくはHTML標準のFILE APIで定義されるFILEオブジェクトでパラメータを設定できます。
successCallBackファイルのロードが成功した場合に実行されるコールバック関数。コールバック時、引数にはJSON化されたファイルのオブジェクトが入ります。
errorCallBackファイルのロードが失敗した場合に実行されるコールバック関数。
optionsExcelのインポートに関するオプション。保護されたExcelファイルのインポートに必要なパスワードなどを設定できます。省略可。

例えば以下はopenメソッドとHTML標準のINPUT要素を組み合わせ、ローカル環境からのExcelファイルインポートを実現する例です(“Run Project”をクリックするとデモが起動します)。

任意のExcelファイルを用意の上、[ファイルを選択]ボタンをクリックして表示されるダイアログから選択し、[インポート]ボタンをクリックすることでSpreadJSへのExcelファイルインポートを確認できます。



なお、インポート機能を利用するためにはSpreadJSの本体モジュールに加えて、Excelファイルの入出力機能を司るgc.spread.excelio.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>
    <!--Excel入出力用モジュールの参照-->
    <script src="scripts/gc.spread.excelio.x.x.x.min.js"></script>
</head>
</html>

npmからライブラリを参照する場合の例

// SpreadJS本体モジュールの参照
import * as GC from '@grapecity/spread-sheets';
// Excel入出力用モジュールの参照
import * as Excel from '@grapecity/spread-excelio';

サーバーにあるExcelファイルのインポートにも対応

上記ではローカル環境にあるExcelファイルをSpreadJSにインポートする例をご紹介しましたが、人手を介さず、サーバーなどに配置したExcelファイルをシステム上のSpreadJSにインポートしたい場合もあるかと思います。

その場合は以下の様にしてサーバーへデータをリクエストし、ExcelファイルをBlob形式データで取得の上、openメソッドに渡すことでネットワーク上にあるファイルのインポートを実現できます。

// SpreadJSのインスタンスを生成します
var workbook = new GC.Spread.Sheets.Workbook("ss");

// ExcelIOインスタンスを生成します
var excelIo = new GC.Spread.Excel.IO();

// サーバー上にある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 () {
    var blob = oReq.response;
    // ExcelIOライブラリでXMLHttpRequestの結果を開きます
    excelIo.open(blob, function (json) {
        // ExcelIOライブラリによって出力されたJSONデータをSpreadJSにロードします
        workbook.fromJSON(json);
    }, function (message) {
        // 読み込み失敗した場合はエラーメッセージをコンソール出力します
        console.log(message);
    });
};
//リクエストを実行します
oReq.send();

リボンコンテナを使用したインポート機能の利用

openメソッドのほか、SpreadJSに収録のコンポーネント「リボンコンテナ」を利用することでもExcelファイルのインポートを実現できます。

同コンポーネントはスプレッドシートのほか、Excelライクなリボンメニューや数式バー、ステータスバーなども備える便利なコンポーネントです。わずかな初期化処理さえ実装すれば、リボンメニューにある[ファイル]からのインポート機能が利用できるようになります(実装方法については上記の記事をご参照ください)。

リボンコンテナによるインポート

インポート機能をデモで確認

今回はSpreadJSのインポート機能をご紹介しました。この機能を活用することでシステムとExcelファイルのスムーズな連携が可能になります。

弊社ウェブサイトでは同機能をより詳細に確認できる「チュートリアルデモ」も公開しています。今回の記事ではご紹介しきれなかったインポート時のパスワード設定などもご確認いただけるようになっていますので、気になった方はこちらも併せてご参照いただければ幸いです。