BlazorビューワのAPIを使用すると、ツールバーのデフォルトのインタフェースとビューワのサイドバーを完全にカスタマイズできます。
次のように、ツールバーのレイアウトをデスクトップ、フルスクリーン、またはモバイルに更新します。
BlazorViewer.razor |
コードのコピー
|
---|---|
@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つのエクスポートボタンを追加します。
BlazorViewer.razor |
コードのコピー
|
---|---|
@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メソッドを使用してツールバーを表示または非表示にできます。
BlazorViewer.razor |
コードのコピー
|
---|---|
private void InitializedViewer() { _viewer.Toolbar.Toggle(false); } |
BlazorViewer.razor |
コードのコピー
|
---|---|
private void InitializedViewer() { _viewer.Sidebar.Toggle(false); } |