# Toolbar Tools The PDFViewer component toolbar provides various tools that enable users to interact with the PDFViewer component and perform different actions over the displayed PDF content. This article describes the built-in tools and shows how to customize them. By default, the PDFViewer displays all its built-in tools. To display only the required tools or change their order, set the [`tools`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#tools) property of the component to [`PDFViewerTool`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewertool) array. The available tools are: * [`pager`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#pager-tool)—Allows you to navigate through the pages. * [`spacer`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#spacer)—Enables you to define spacing between the toolbar inner elements. * [`zoomInOut`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#zooming-tools)—Displays buttons for zooming in and out. * [`zoom`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#zooming-tools)—Renders a ComboBox component for setting predefined or custom zoom levels (default value is `125%`). * [`selection`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#selection-tool)—Allows you to customize the pointer functionality within the PDF document with `Pointer` and `Hand` modes. * [`search`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#search-tool)—Enables the search functionality. * [`open`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#open-tool)—Allows you to select a PDF document from the file system. * [`download`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#download-tool)—Enables you to download the viewed PDF document. * [`print`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#print-tool)—Opens the browser print window. * [`annotations`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#annotations-tool)—Enables you to add and manage annotations within the PDF document. The following example demonstrates how to reorder the built-in tools by setting the [`tools`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#tools) property of the PDFViewer. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/overview/source.txt) ## Pager Tool The pager tool allows you to navigate through the PDFViewer pages when the displayed PDF contains more than on page. > For the pager to work, set the height of the PDFViewer to be smaller than the height of the loaded document. The following example demonstrates the pager tool of the PDFViewer in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/pager/source.txt) ### Programmatically Scrolling the PDFViewer The PDFViewer lets you scroll to a specific page programmatically by using its [`scrollToPage()`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#scrolltopage) method. This method accepts as a parameter the page number to which you desire to scroll, treating 0 as the first page of the document. The following example demonstrates how to programmatically scroll to a specific page in the PDFViewer. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/pager/scrolltopage/source.txt) ## Search Tool The searching tool enables you to find a specific word or phrase inside the PDF document. Navigate through the results by using the **Up** and **Down** arrows. > The number of pages in the loaded PDF document might affect the performance of the PDFViewer search functionality. In case the performance falls below acceptable levels, consider removing the search tool to ensure optimal user experience. The following example demonstrates the search tool of the PDFViewer in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/search/source.txt) ## Zooming Tools The PDFViewer component provides multiple ways to zoom in and out of a PDF document: * Use the **ZoomIn** and **ZoomOut** buttons of the `zoomInOut` tool. The default zoom rate is 0.25 (25%), but you can customize it by setting the [`zoomRate`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#zoomrate) property. * Select a predefined zoom level or set a custom one using the `zoom` tool. * Configure the initial zoom level by setting the [`zoom`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#zoom) property. The available options include: * A numeric value—Lets you set a custom zoom level. The default value is `1.25`, which equals 125%. * `fitToPage`—Adjusts the PDF document to fit within the available vertical space, ensuring the entire page is visible. * `fitToWidth`—Adjusts the PDF document to fit within the available horizontal space. * Hold the `Ctrl` or `Cmd` (Mac) key while scrolling the mouse wheel to zoom in or out. Additionally, you can restrict the zoom levels by setting the [`minZoom`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#minzoom) and [`maxZoom`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#maxzoom) properties. The following example demonstrates the `zoom` property and the available zooming tools in action. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/zoom/source.txt) ## Selection Tool The selection tool allows you to customize the pointer functionality within the PDF document: * Pointer Mode—Use the pointer icon to highlight text or interact with form fields and clickable elements, such as links, within the document. * Hand Mode—Use the hand icon to scroll through the document by dragging the content. The following example demonstrates the selection tools of the PDFViewer component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/selection/source.txt) ## Spacer The spacer allows you to define spacing between the toolbar inner elements. It is useful when you want to group certain tools together or create visual separation between different sections of the toolbar. ```html ``` ## Download Tool The download tool allows you to download the viewed document. You can configure the name of the file by setting the [`saveFileName`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#savefilename) option. Set the [`saveOptions`](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent#saveoptions) property to further configure proxy URLs, targets and others. The `saveOptions` property accepts a [`SaveOptions`](https://www.telerik.com/kendo-angular-ui-develop/components/file-saver/api/saveoptions) object. The following example demonstrates the download tool of the PDFViewer component and how to set the file name of the downloaded file. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/download/source.txt) ## Open Tool The PDFViewer allows you to open a PDF file from your local file system. This is extremely useful when you want to preview and validate the selected PDF, before proceeding with a certain action. The following example demonstrates the open tool of the PDFViewer component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/open/source.txt) ## Print Tool The print tool opens the browser print window which enables you to configure and print the document. The following example demonstrates the upload tool of the PDFViewer component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/print/source.txt) ## Annotations Tool The annotations tool enables you to add and manage annotations within the PDF document to enhance its content. This tool is only active when the text [selection tool](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#selection-tool) is enabled and provides highlighting and free text annotation capabilities. The PDFViewer creates a dedicated layer for annotations and includes them when downloading or printing the file. If you open a file with existing annotations, you can only edit annotations that were added using the PDFViewer `Annotations` tool. The PDFViewer does not support editing annotations added in other PDF editors. To access the annotations functionality, click the `Annotations` button in the toolbar. This opens a dedicated annotations toolbar with the available annotation types. > The Annotations tool is only active when text [selection tool](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#selection-tool) is enabled. The following example demonstrates the annotations tool of the PDFViewer component. [Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pdfviewer/tools/annotations/source.txt) ### Supported Annotation Types The PDFViewer provides the following annotation types: | Annotation Type | Description | | ------------------ | -------------------------------------------------------------------------------------------------- | | **Text Highlight** | Allows highlighting selected text in the document. Users can choose the desired highlight color. | | **Free Text** | Allows creating text elements anywhere in the document with customizable text color and font size. | ### Working with Annotations To manage annotations, follow these steps: 1. Enable Text Selection mode—The annotations tool is only available when the [selection tool](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#selection-tool) is enabled. 2. Open the Annotations toolbar—Click the **Annotations** button in the main toolbar to reveal the annotations toolbar. 3. Select an annotation type—Click the desired annotation type (Highlight or Free Text) to activate it. Once you enable the annotations and select an annotation type, you can [create](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#creating-annotations) or [edit](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/tools#editing-annotations) annotations. #### Creating Annotations * Text Highlight—Double-click on a word to highlight it, or drag to select and highlight a text range. * Free Text—Click anywhere on the document canvas to open the free text editor. #### Editing Annotations * Select annotations—Click on an existing annotation to select it. Hold `Ctrl` (or `Cmd` on Mac) and click to select multiple annotations of the same type. * Edit properties—Selected annotations display a toolbar with Edit and Delete options: * Edit opens a color picker for highlights or font/color options for free text * Delete shows a confirmation dialog before removing the annotation * Edit free text content—Double-click a free text annotation to edit its text content. * Move free text—Click and drag a free text annotation to reposition it. ## Suggested Links * [Angular PDFViewer Form Filling](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/form-filling) * [API Reference of the PDFViewer component](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api/pdfviewercomponent) * [API Index of the PDFViewer](https://www.telerik.com/kendo-angular-ui-develop/components/pdfviewer/api)