Excelデータを扱うWebページを「DioDocs」と「SpreadJS」の連携で作ろう

売上帳票をPDFで出力するサンプルを作る

　これまでの例を組み合わせたより実践的な例として、売上帳票をPDFで出力するサンプル（図6）を紹介します。Excelの帳票テンプレート（template.xlsx）をDioDocsで読み込んで加工後、SpreadJSでWebページ上に表示します。この帳票には「販売数」と「店舗コメント」を入力でき、販売数の入力を反映してチャートなどの画面表示が更新されます。

図6　売上帳票アプリ（P004SalesReport）

　図6の画面で「DioDocsでPDF生成」ボタンをクリックすると、Webページに表示した売上帳票の内容を反映して、図7のPDFを生成します。

図7　売上帳票アプリで生成したPDF（P004SalesReport）

　このサンプルは、これまで説明してきた内容を組み合わせて実現されています。すべての実装内容はサンプルコードを参照してください。ここでは、このサンプルの特徴的な実装について、概要を説明します。

帳票にチャートを追加する処理

　このサンプルでは、DioDocsで帳票データを加工時、チャートを動的に追加しています。これは、チャートのデータ範囲をデータ数に合わせて動的に設定することを意図しています。このサンプルではデータは常に3個ですが、例えば、データベースから取得したデータ数に合わせて、動的にチャートのデータ範囲を設定する処理を実現できます。

［リスト8］帳票にチャートを追加する処理（P004SalesReport/Controllers/DioDocsController.cs）

// チャートを追加 ...（1）
IShape columnChartshape
    = worksheet.Shapes.AddChart(ChartType.ColumnClustered, 460, 50, 250, 210);
// 系列を設定 ...（2）
columnChartshape.Chart.SeriesCollection.Add(worksheet.Range["B3:C6"]);
// タイトルと凡例を削除 ...（3）
columnChartshape.Chart.ChartTitle.Delete();
columnChartshape.Chart.Legend.Delete();

　（1）のworksheet.Shapes.AddChartメソッドでワークシートにチャートを追加します。第1引数はチャートの種類（ここでは縦棒チャート）、第2、3引数は位置、第4、5引数はサイズです。（2）のSeriesCollection.Addメソッドでチャートに系列を追加します。チャートに表示するデータの範囲（B3:C6）を引数で指定します。（3）はデフォルトで表示されるタイトルと凡例を削除する処理です。DioDocsでチャートを利用する方法の詳細は、公式ドキュメントを参照してください。

PDF保存時にオプションを設定する処理

　SpreadJSはそれ自身にPDF出力の機能を持っていますが、DioDocsでは、SpreadJSが対応していないドキュメントプロパティやセキュリティオプションといった、追加のオプション設定をPDFに設定できます。設定方法をリスト9に示します。

［リスト9］PDF保存オプションの設定（P004SalesReport/Controllers/DioDocsController.cs）

var opt = new PdfSaveOptions // PDF保存オプション ...（1）
{
    // セキュリティオプション ...（2）
    SecurityOptions = new PdfSecurityOptions
    {
        UserPassword = "user", // ユーザーパスワード
        OwnerPassword = "owner", // オーナーパスワード
        ExtractContentPermission = false, // コピーを不許可
（略）
    },
    // ドキュメントプロパティ ...（3）
    DocumentProperties = new DocumentProperties
    {
        //-- SpreadJSで対応しているプロパティ
（略）
        //-- 以下はSpreadJSで対応していないプロパティ
        PdfVersion = 1.7f, // PDFバージョン
        Producer = "DioDocs", // PDFを作成したアプリ名
        CreationDate = DateTime.Now, // 作成日時
        ModifyDate = DateTime.Now // 更新日時
    }
};
workbook.Save(stream, opt); // オプションを設定してPDFを生成

　（1）でPDF保存オプションのオブジェクトoptを生成します。この中にはセキュリティオプション（2）とドキュメントプロパティ（3）を含むことができます。セキュリティオプションでは、ドキュメントにパスワードを設定したり、特定の操作を禁止したりできます。ドキュメントプロパティでは、SpreadJSで指定できるプロパティ（タイトルや作者など）のほか、SpreadJSでは対応していないPDFバージョンやPDF作成アプリ名、作成／更新日時を設定できます。（4）のworkbook.Saveメソッドで、引数にoptを与えて、PDF保存オプションを反映させます。すべての設定内容はサンプルコードを参照してください。

まとめ

　本記事では、DioDocsとSpreadJSを連携させて利用する方法を紹介しました。DioDocsとSpreadJSの間でスプレッドシートのデータをJSON文字列で送受信して連携させることで、DioDocsとSpreadJSが持つ互いの利点を生かしてアプリを作成できます。

参考資料

• DioDocs
• SpreadJS