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

BlazorビューワのAPIを使用すると、ツールバーのデフォルトのインタフェースとビューワのサイドバーを完全にカスタマイズできます。

レイアウトを更新

次のように、ツールバーのレイアウトをデスクトップ、フルスクリーン、またはモバイルに更新します。

@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
<div class="main">
    @* Used to render list of Reports on the page *@
    <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer"/>
    </div>
</div>
@code{
    private ReportViewer _viewer;
    private List<string> reportsList;
    private string _currentReport = null;
    private bool _documentLoaded = false;
    protected override void OnInitialized()
    {
        reportsList = ReportsService.GetReports().ToList();
        _currentReport = reportsList.FirstOrDefault();      //最初のレポートを_currentReportの値として設定します。
    }
    //クリックイベントハンドラを使用して、_currentReport値を再初期化し、ビューワで新しいレポートを開きます。
    private async void OnClick(string res)
    {
        _currentReport = res;
        await _viewer.OpenReport(_currentReport);
    }
    private void InitializedViewer()
    {
        _viewer.Toolbar.Desktop.Layout(new string[] { "$zoom", "$split", "$fullscreen", "$split", "$print" });
        //_viewer.Toolbar.Fullscreen.Layout(new string[] { "$fullscreen", "$print" });
        //_viewer.Toolbar.Mobile.Layout(new string[] { "$navigation"});
    }
}

カスタムツールバー項目を追加する

次の例では、PDFエクスポートとExcelエクスポートの2つのエクスポートボタンを追加します。

@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
<div class="main">
    @* Used to render list of Reports on the page *@
    <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" ViewerInitialized="InitializedViewer" DocumentLoaded="@DocumentLoaded" Locale="ja-JP"/>
    </div>
</div>
@code{
    private ReportViewer _viewer;
    private List<string> reportsList;
    private string _currentReport = null;
    private bool _documentLoaded = false;
    protected override void OnInitialized()
    {
        reportsList = ReportsService.GetReports().ToList();
        _currentReport = reportsList.FirstOrDefault();    
        //最初のレポートを_currentReportの値として設定します。
    }
    //クリックイベントハンドラを使用して、_currentReport値を再初期化し、ビューワで新しいレポートを開きます。
    private async void OnClick(string res)
    {
        _currentReport = res;
        _documentLoaded = false;
        await _viewer.OpenReport(_currentReport);
    }
    private async void DocumentLoaded()
    {
        _documentLoaded = true;
    }
    private void InitializedViewer()
    {
        //ツールバーに新しい項目を追加します（レポートを開く前に実行します）。
 
        _viewer.Toolbar.Desktop.AddItem(new ToolbarItem()
        {
            Text = "PDFにエクスポート",
            Key = "$ExportPDF",
            Enabled = true,
            Title = "PDFにエクスポート",
            Action = async () =>
            {
                //ドキュメントが描画された後にのみエクスポートを実行できます。
                if (_documentLoaded)
                {
                    await _viewer.Export(ExportTypes.Pdf,           //エクスポート形式を設定します。
                    (uri) =>
                    {
                        //エクスポート結果が利用可能になると呼び出されるコールバック関数（URLはコールバックで渡されます）。
                    },
                    true, //結果が表示したらすぐに［名前を付けて保存］ダイアログを表示するかどうかを示します。
                    new Dictionary<string, string>() { { "Title", "Some Title" } },         //描画拡張機能のエクスポート設定
                    () =>
                    {
                        //エクスポートタスクの取り消し要求の確認
                        return false;
                    });
                }
            }
        });
        _viewer.Toolbar.Desktop.AddItem(new ToolbarItem()
        {
            Text = "Xlsxにエクスポート",
            Key = "$ExportExcel",
            Enabled = true,
            Title = "Xlsxにエクスポート",
            Action = async () =>
            {
                //ドキュメントが描画された後にのみエクスポートを実行できます。
                if (_documentLoaded)
                {
                    await _viewer.Export(ExportTypes.Xlsx,           //エクスポート形式を設定します。
                    (uri) =>
                    {
                        //エクスポート結果が利用可能になると呼び出されるコールバック関数（URLはコールバックで渡されます）。
                    },
                    true, //結果が表示したらすぐに［名前を付けて保存］ダイアログを表示するかどうかを示します。
                    new Dictionary<string, string>() { { "Title", "Some Title" } },         //Export setting for Rendering Extensions
                    () =>
                    {
                        //エクスポートタスクの取り消し要求の確認
                        return false;
                    });
                }
            }
        });
    }
}

ツールバーを表示または非表示にする

InitializedViewerメソッドで、Toggleメソッドを使用してツールバーを表示または非表示にできます。

private void InitializedViewer()
 {
   _viewer.Toolbar.Toggle(false);
 }

サイドバーを表示または非表示にする

InitializedViewerメソッドで、Toggleメソッドを使用してサイドバーを表示または非表示にできます。

private void InitializedViewer()
 {
   _viewer.Sidebar.Toggle(false);
 }