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"; declare var GrapeCity: any; @Component({ selector: "app-root", templateUrl: "./app.component.html", }) export class AppComponent implements AfterViewInit { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ 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"); } }

app.component.ts

コードのコピー

import { Component, AfterViewInit } from "@angular/core";
declare var GrapeCity: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements AfterViewInit {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      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、およびJavaScriptアプリケーションでも同じ方法を使用できます。

app.component.ts	コードのコピー
import { Component, AfterViewInit } from "@angular/core"; declare var GrapeCity: any; @Component({ selector: "app-root", templateUrl: "./app.component.html", }) export class AppComponent implements AfterViewInit { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ 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"); } }

app.component.ts

コードのコピー

import { Component, AfterViewInit } from "@angular/core";
declare var GrapeCity: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements AfterViewInit {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      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"; declare var GrapeCity: any; @Component({ selector: "app-root", templateUrl: "./app.component.html", }) export class AppComponent implements AfterViewInit { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.toolbar.toggle(false); this.viewer.sidebar.toggle(false); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

コードのコピー

import { Component, AfterViewInit } from "@angular/core";
declare var GrapeCity: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements AfterViewInit {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewer-host'
    });
    this.viewer.toolbar.toggle(false);
    this.viewer.sidebar.toggle(false);
    this.viewer.openReport("DemoReport.rdlx");
  }
}