作成日: 2026/03/25    最終更新日: 2026/03/25

文書種別

使用方法

詳細

BlazorビューワのツールバーはC#のコードでカスタマイズできます。

デスクトップ用のツールバーにボタンを追加する場合、以下のように記述します。

@inject IJSRuntime JsRuntime

<div class="main">
  <div id="viewerContainer">
    <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="OnViewerInitialized" />
  </div>
</div>

@code{
  private ReportViewer _viewer;
  private string _currentReport = "Report.rdlx";

  private void OnViewerInitialized()
  {
    _viewer.Toolbar.Desktop.AddItem(new ToolbarItem()
    {
      Key = "$Custom",
      Title = "Custom",
      Enabled = true,
      IconCssClass = "icon_custom",
      Action = async() => { await JsRuntime.InvokeVoidAsync("alert", "サンプル"); }
    });
  }
}

IconCssClassプロパティにCSSのクラスを設定し、独自のアイコンを表示することも可能です。
CSSのクラスは以下のように定義します。

.icon_custom {
  background-image: url("/svg/sample.svg");
  background-repeat: no-repeat;
  background-position: center
}

製品ヘルプの以下のトピックをあわせてご確認ください。

Blazorビューワのカスタマイズ