Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

5分でわかるActiveReports帳票-HTML5ビューワ

ActiveReports for .NET 9.0Jで作るサンプル帳票(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

HTML5ビューワの操作

 APIを利用してHTML5ビューワを操作する方法を紹介します。

ツールバーのカスタマイズ

 HTML5ビューワのツールバーは、ボタンを追加したり、既存のボタンの動作を変更したりといったカスタマイズはできません。ただし、[名前を付けて保存]リストに表示するエクスポートの種類については変更できます。

 付属のサンプルは、「02a_HTML5ビューワの操作(ツールバーのカスタマイズ).html」をご参照ください。

デフォルトの[名前を付けて保存]リスト
デフォルトの[名前を付けて保存]リスト

 availableExportsオプションを使用して、[名前をつけて保存]リストに表示するエクスポートの種類を設定します。たとえば、「PDFとExcelに限定したい」場合、以下のように設定します。

<script type="text/javascript">
    $(function () {
        var viewer = GrapeCity.ActiveReports.Viewer(
        {
            element: '#viewer',
            report: {
                id: "reports/02_HTML5ビューワの操作.rdlx"
            },
            reportService: {
                url: '/ActiveReports.ReportService.asmx'
            },
            uiType: 'desktop',
            localeUri: 'scripts/ja/ja.txt',
            // エクスポートをPDFとエクセルだけに限定します。
            availableExports: ['Pdf', 'Xls'],
        });
    }
    );
</script>
PDFとExcelに限定
PDFとExcelに限定

独自のボタンを使用する

 HTML5ビューワのツールバーを使用せずに、独自のボタンを追加してHTML5ビューワを操作する方法を説明します。ここでは、以下の機能を追加します。

  • ページ移動(現在のページ番号、前ページ、次ページ)
  • 印刷
  • PDF出力

 付属のサンプルは、「02b_HTML5ビューワの操作(独自のボタンを使用する).html」をご参照ください。

 ボタンを追加して、onclick属性にそれぞれの動作を設定します。

<input id="prevPage" title="前ページ" type="button" value="&lt;" onclick="prevPage()" />
<input id="currentPage" title="現在のページ番号" style="text-align:center" type="text" readonly="true" />
<input id="nextPage" title="次ページ"  type="button" value="&gt;" onclick="nextPage()" />
<input id="printReport" title="印刷"  type="button" value="印刷" onclick="printReport()" />
<input id="exportReport" title="PDF出力"  type="button" value="PDF出力" onclick="exportReport()" />

 次に、それぞれの関数を作成します。

1)ページ移動(現在のページ番号、前ページ、次ページ)

 currentPageプロパティ、pageCountプロパティ、およびgoToPageメソッドを使用して、ページの表示/移動を行います。

// 現在のページ番号
function dispPage() {
    var c = viewer.currentPage;
    var t = viewer.pageCount;
    $('#currentPage').val(c + '/' + t);
}

// 前ページ
function prevPage() {
    var page = viewer.currentPage;
    page -= 1;
    viewer.goToPage(page);
    dispPage();
}

// 次ページ
function nextPage() {
    var page = viewer.currentPage;
    page += 1;
    viewer.goToPage(page);
    dispPage();
}

2) 印刷

 printメソッドを利用して、レポートを印刷します。

// 印刷
function printReport() {
    viewer.print();
}

3) PDF出力

 exportメソッドを使用して、レポートをPDFファイルにエクスポートします。またFileNameプロパティを使用して、保存時のデフォルトのファイル名を設定できます。

// PDF出力
function exportReport() {
    viewer.export('Pdf', downloadReport, true, { FileName: "DefaultName.pdf" });
}
// 関数uriからレポートを取得します。(コールバック関数)
var downloadReport = function (uri) {
    var newWin = null;
    // uriを新しいウィンドウで開きます。
    try {
        newWin = window.open(uri);
    } catch (e) { }
    // uriを新しいウィンドウで開けない場合は、現在のウィンドウで開きます。
    if (!newWin) {
        window.location = uri;
    }
};
独自のボタン
独自のボタン

エラーパネルのカスタマイズ

 レポートの生成中にエラーが発生した場合、HTML5ビューワのエラーパネルにエラーメッセージが表示されますが、エラーパネルに表示する内容を変更できます。

 付属のサンプルは、「02c_HTML5ビューワの操作(エラーパネルのカスタマイズ).html」をご参照ください。

エラーパネル(デフォルト)
エラーパネル(デフォルト)

 error.messageオプションを使用して、エラーパネルに表示するエラーメッセージを変更します。また、showOnlyLastErrorオプションを使用して、エラーパネル内の右側にある[詳細]ボタンを非表示に設定します。

<script type="text/javascript">
    $(function () {
        var viewer = GrapeCity.ActiveReports.Viewer(
        {
            element: '#viewer',
            report: {
                id: "reports/02_エラーレポート.rpx"
            },
            reportService: {
                url: '/ActiveReports.ReportService.asmx'
            },
            uiType: 'desktop',
            localeUri: 'scripts/ja/ja.txt',
            // エラーメッセージをカスタマイズします。
            error: function (error) {
                error.message = "独自のエラーメッセージを表示します。";
            },
            // エラーパネルの[詳細]ボタンを非表示にします。
            showOnlyLastError: true
        });
    }
    );
</script>
エラーパネル(カスタマイズ)
エラーパネル(カスタマイズ)

注意

 エラーパネルをカスタマイズする機能は、Service Pack 2(v9.2.5098.1)で追加された機能です。初版およびSP1では使用できません。


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

著者プロフィール

バックナンバー

連載:5分でわかるActiveReports帳票

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5