スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法

このCookBookでは、スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法について紹介しています。
IM-FormaDesignerの実行画面から直接、画面アイテム「スプレッドシート」をExcelファイルとしてエクスポートすることが可能になります。

完成イメージ


1. 実行画面を開きます。
2. ファイル名を入力します。
3. 出力ボタンを押下し、ブラウザのダウンロードダイアログが表示されます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
なお、以下のサンプルはintra-mart Accel Platform 2019 Springの環境を利用して作成したものです。
2019 Springより前のバージョンでは正常に動作しない可能性があります。

IM-Spreadsheet Option for Accel Platformモジュールのバージョンは8.0.3です。
上記製品内のSpreadJSバージョンは12.0.7です。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/forma/normal/view/regist_application_view/155266_spread_export
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

完成サンプルをご利用の際は、利用するユーザのロールに「Formaアプリ作成者」を設定してください。

レシピ

  1. テンプレートHTMLを編集する。
  2. 実行画面を作成する。
  3. スクリプトを作成する。

1. テンプレートHTMLを編集する。

IM-FormaDesignerのアプリケーションが実行される画面は、テンプレートHTMLというベースとなるHTMLファイル上に、各画面アイテムのHTMLが配置されて生成される仕組みになっています。

Excel出力機能を利用するために、必要なライブラリを定義しておく必要があります。

  • 以下のテンプレートファイルをカスタマイズします。
パブリックストレージ/forma/html_template/template.html
  • Excel出力機能に必要なライブラリを、template.htmlのヘッダーに追記します。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script type="text/javascript" src="im_spreadsheet/12.0.7/SpreadSheets/scripts/interop/gc.spread.excelio.12.0.7.min.js"></script>

※SpreadJSバージョン12.0.7のライブラリを使用してます。利用されているバージョンに合わせてライブラリのパスを変更してください。

2. 実行画面を作成する。

IM-FormaDesignerの標準アプリケーションを作成します。

デザイナ上に以下の画面アイテムを配置します。

  • スプレッドシート
  • 文字列
  • ボタン(イベント)

3. スクリプトを作成する。

画面アイテム「スプレッドシート」をExcelとしてエクスポートするスクリプトを作成します。

  • 画面アイテム「ボタン(イベント)」のプロパティにある「スクリプト」タブに以下のスクリプトを記述します。

%フィールド識別ID%には、画面アイテム「文字列」のフィールド識別IDを記述します。
%スプレッドシートID%には、画面アイテム「スプレッドシート」のスプレッドシートIDを記述します。

// ファイル名取得
var excelName = document.getElementsByName('%フィールド識別ID%')[0].value;
// 拡張子設定
if (excelName.substr(-5, 5) !== '.xlsx') {
  excelName += '.xlsx';
}
// インスタンス生成
var excelIo = new GC.Spread.Excel.IO();
// 対象スプレッドシート設定
var excelSpread = GC.Spread.Sheets.findControl(document.getElementById('%スプレッドシートID%'));
// データ取得
var json = JSON.stringify(excelSpread.toJSON({ includeBindingSource: true }));
// エクスポート実行
excelIo.save(json, function(blob) {
  saveAs(blob, excelName);
}, function(error) {
  // エクスポート失敗
  console.log(error);
});

以上で、実行画面からExcelファイルが簡単にエクスポートできるようになりました。

今回のようにSpreadJSのライブラリを使うことでIM-Spreadsheetに対し、様々な開発が可能になります。

※SpreadJSのライブラリはIM-FormaDesignerとしての出力物を調整したりするものではありません。
SpreadJSライブラリについては以下のGrapeCity社のマニュアルを参照してください。
SpreadJS