SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

高機能JavaScriptグリッド部品「SpreadJS」の活用(AD)

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

  • このエントリーをはてなブックマークに追加

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

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

図6 売上帳票アプリ(P004SalesReport)
図6 売上帳票アプリ(P004SalesReport)

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

図7 売上帳票アプリで生成したPDF(P004SalesReport)
図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が持つ互いの利点を生かしてアプリを作成できます。

参考資料

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
高機能JavaScriptグリッド部品「SpreadJS」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12207 2020/05/12 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング