ActiveReports for .NET 18.0J
JSビューワのカスタマイズ
ActiveReportsユーザーガイド > レポートの表示 > JSビューワの使用 > カスタマイズ化 > JSビューワのカスタマイズ

JSビューワの初期化中と実行時に設定できるオプションを使用することで、ビューワのツールバーとサイドバーをカスタマイズすることができます。

ツールバーレイアウトを設定する

JSビューワには、3つの組み込みツールバーレイアウトがあります。

デフォルトでは、各レイアウトには次の項目が含まれます。

内部ID 説明
$navigation 先頭ページ、前ページ、次ページ、最終ページボタン
$split セパレーター
$refresh 更新ボタン
$history 親レポートに戻る、戻る、進むボタン
$zoom ズームモード
$fullscreen フルスクリーンモード
$print 印刷ボタン
$singlepagemode 単一ページモード
$continuouspagemode 連続ページモード
$galleymode ゲラモード

layoutメソッドを使用すると、各レイアウトのツールバーに指定された項目のみを表示できます。次の例では、Angularアプリケーションで、デスクトップレイアウトに［ズーム］、［フルスクリーン］、［印刷］ボタンを表示し、フルスクリーンレイアウトに［フルスクリーン］、［印刷］ボタン、およびモバイルレイアウトに［先頭ページ］、［前ページ］、［次ページ］、［最終ページ］ボタンをのみ表示します。

app.component.ts
コードのコピー 
import { Component, AfterViewInit } from '@angular/core';
import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit {
  title = "app";
 
  ngAfterViewInit() {
    this.viewer = createViewer({
      element: '#viewer-host'
    });
    this.viewer.toolbar.desktop.layout(["$zoom", "$split", "$fullscreen", "$print"]);
    this.viewer.toolbar.fullscreen.layout(["$fullscreen", "$print"]);
    this.viewer.toolbar.mobile.layout(["$navigation"]);
    this.viewer.openReport("DemoReport.rdlx");
  }
}

同様に、React、Vue、およびJavaScriptアプリケーションのビューワのレイアウトをカスタマイズできます。

ツールバー項目を追加と削除する

3つのレイアウトモードでは、viewer.toolbarプロパティのaddItemメソッドとremoveItemメソッドを使用して、ツールバーのカスタム要素を追加および削除できます。次の例では、Angularアプリケーションで、ツールバーに［製品情報］ボタンを表示します。React、Vue、およびASP.NET MVCアプリケーションでも同じ方法を使用できます。

app.component.ts
コードのコピー 
import { Component, AfterViewInit } from '@angular/core';
 import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements AfterViewInit {
    title = "app";
  ngAfterViewInit() {
      this.viewer = createViewer({
        element: '#viewer-host'
      });
    var self = this; 
    var options = { filename: "DemoReport" };
    var pdfExportButton = {
        key: '$pdfExportButtonKey',
        iconCssClass: 'mdi mdi-file-pdf',
        text: "Pdf",
        enabled: true,
        action: function (item) {
          console.log('PDF形式にエクスポートします。');
          self.viewer.export('Pdf', null, true, options);
        },
        onUpdate: function (arg, item) {
          console.log('ビューワが更新されました。');
        }
      };
     this.viewer.toolbar.desktop.addItem(pdfExportButton);
    this.viewer.openReport("DemoReport.rdlx");
    }
  }

ツールバーとサイドバーを表示／非表示にする

toolbar.toggleおよびsidebar.toggleメソッドを使用して、JSビューワのデフォルトのツールバーおよびサイドバーを非表示にできます。この方法は、カスタムUIによって、パブリックAPIを使用してビューワの関数を呼び出す場合に役立ちます。次の例では、AngularアプリケーションでJSビューワのツールバーとサイドバーをカスタマイズします。

app.component.ts
コードのコピー 
import { Component, AfterViewInit } from '@angular/core';
import { createViewer} from '@mescius/activereportsnet-viewer';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterViewInit {
   title = "app";
  ngAfterViewInit() {
    this.viewer = new createViewer({
       element: '#viewer-host'
     });
    this.viewer.toolbar.toggle(false);
    this.viewer.sidebar.toggle(false);
    this.viewer.openReport("DemoReport.rdlx");
   }

 

 

© MESCIUS inc. All rights reserved.