The Blazor Viewer API lets developers completely overwrite the toolbar's default user interface and the viewer component's sidebar.
Update the toolbar layout to Desktop, Fullscreen, or Mobile as shown.
BlazorViewer.razor |
Copy Code
|
---|---|
@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(); //Sets the first report as the value of _currentReport } //click event handler to reinitialize the _currentReport value and open the new report in the viewer 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"}); } } |
The following example adds two export buttons - pdf export and excel export.
BlazorViewer.razor |
Copy Code
|
---|---|
@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(); //Sets the first report as the value of _currentReport } //click event handler to reinitialize the _currentReport value and open the new report in the viewer private async void OnClick(string res) { _currentReport = res; _documentLoaded = false; await _viewer.OpenReport(_currentReport); } private async void DocumentLoaded() { _documentLoaded = true; } private void InitializedViewer() { // To add a new item in the ToolBar (it is to be performed before the report is opened) _viewer.Toolbar.Desktop.AddItem(new ToolbarItem() { Text = "Export to PDF", Key = "$ExportPDF", Enabled = true, Title = "Export to PDF", Action = async () => { // you can perform export only after the document is loaded. if (_documentLoaded) { await _viewer.Export(ExportTypes.Pdf, //Sets the export type (uri) => { //callback Function that is invoked once the export result is available (the Url is passed in the callback) }, true, // Indicates whether the save as dialog should be shown immediately once the result is ready new Dictionary<string, string>() { { "Title", "Some Title" } }, //Export setting for Rendering Extensions () => { //сhecking export cancellation return false; }); } } }); _viewer.Toolbar.Desktop.AddItem(new ToolbarItem() { Text = "Export to Xlsx", Key = "$ExportExcel", Enabled = true, Title = "Export to Xlsx", Action = async () => { // you can perform export only after the document is loaded. if (_documentLoaded) { await _viewer.Export(ExportTypes.Xlsx, //Sets the export type (uri) => { // callback Function that is invoked once the export result is available (the Url is passed in the callback) }, true, // Indicates whether the save as dialog should be shown immediately once the result is ready new Dictionary<string, string>() { { "Title", "Some Title" } }, //Export setting for Rendering Extensions () => { //сhecking export cancellation return false; }); } } }); } } |
In the InitializedViewer() method, use the Toggle method to set the toolbar visibility.
BlazorViewer.razor |
Copy Code
|
---|---|
private void InitializedViewer() { _viewer.Toolbar.Toggle(false); } |
In the InitializedViewer() method, use the Toggle method to set the sidebar visibility.
BlazorViewer.razor |
Copy Code
|
---|---|
private void InitializedViewer() { _viewer.Sidebar.Toggle(false); } |