PdfViewer Toolbar
The Blazor PDF Viewer toolbar can render built-in and custom tools. This article describes the built-in tools and shows how to add custom tools or customize the toolbar.
Built-in Tools
By default, the Blazor PDF Viewer displays all its built-in tools in the order below. Use the tool tag if you need to define a tool explicitly in a custom toolbar configuration.
Command Tools
| Tool Name | Tool Tag | Description |
|---|---|---|
| Open | PdfViewerToolBarOpenTool |
An open command that shows in a submenu upon a hamburger menu click. Fires the OnOpen event. |
| Download | PdfViewerToolBarDownloadTool |
A download command that shows in a submenu upon a hamburger menu click. Fires the OnDownload event. |
PdfViewerToolBarPrintTool |
A print command that shows in a submenu upon a hamburger menu click. The component also provides a Print method. Printing uses an additional browser window with only the PDF document inside. This window may require user confirmation or appropriate browser settings to display. |
|
| Pager | PdfViewerToolBarPagerTool |
A pager to navigate the PDF document via automatic scrolling. Paging requires the Height parameter to be set, otherwise the component expands and doesn't have its own scrollbar. |
| Zoom | PdfViewerToolBarZoomTool |
Zoom in and zoom out buttons with an additional dropdown with common options (Fit to page, Fit to width, 100%, etc.) |
| Selection | PdfViewerToolBarSelectionTool |
Two toggle buttons that enable either text selection or panning. |
| Search | PdfViewerToolBarSearchTool |
A search button. It opens an additional search bar that contains a textbox and arrow buttons to navigate the search results. |
| Annotations | PdfViewerToolBarAnnotationsTool |
A button that toggles the Annotations bar. Explore the available annotation types and how to work with them. |
Layout Tools
| Tool Name | Tool Tag | Description |
|---|---|---|
| Separator | PdfViewerToolBarSeparator |
Renders a vertical line. This is not included in the Toolbar by default but you can use it to visually separate the desired tools. |
| Spacer | PdfViewerToolBarSpacer |
Consumes the available empty space and pushes the rest of the tools next to one another. |
Custom Tools
In addition to built-in tools, the PDF Viewer also supports custom tools. Use the <PdfViewerToolBarCustomTool> tag, which is a standard Blazor RenderFragment. See the example below.
Toolbar Configuration
Add a <PdfViewerToolBar> tag inside <TelerikPdfViewer> to configure a custom toolbar, for example:
- Arrange the PDF Viewer tools in a specific order;
- Remove some of the built-in tools;
- Add custom tools.
Customize the PDF Viewer toolbar
<TelerikPdfViewer Data="@PdfSource">
<PdfViewerToolBar>
<PdfViewerToolBarCustomTool>
<TelerikButton OnClick="@OnPdfCustomClick">Custom PDF Tool</TelerikButton>
</PdfViewerToolBarCustomTool>
<PdfViewerToolBarSeparator />
<PdfViewerToolBarOpenTool />
<PdfViewerToolBarDownloadTool />
<PdfViewerToolBarPrintTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarPagerTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarZoomTool />
<PdfViewerToolBarSelectionTool />
<PdfViewerToolBarSearchTool />
</PdfViewerToolBar>
</TelerikPdfViewer>
@code {
private byte[] PdfSource { get; set; }
private async Task OnPdfCustomClick()
{
Console.WriteLine("Custom PDF tool clicked");
}
}