New to Kendo UI for AngularStart a free 30-day trial

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 property of the component to PDFViewerTool array.

The available tools are:

  • pager—Allows you to navigate through the pages.
  • spacer—Enables you to define spacing between the toolbar inner elements.
  • zoomInOut—Displays buttons for zooming in and out.
  • zoom—Renders a ComboBox component for setting predefined or custom zoom levels (default value is 125%).
  • selection— Depending on the selected button, it allows you to:
    • scroll the document by dragging the page
    • select a text through dragging.
  • search—Enables the search functionality.
  • open—Allows you to select a PDF document from the file system.
  • download—Enables you to download the viewed PDF document.
  • print—Opens the browser print window.

The following example demonstrates how to reorder the built-in tools by setting the tools property of the PDFViewer.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Programmatically Scrolling the PDFViewer

The PDFViewer lets you scroll to a specific page programmatically by using its 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Zooming Tools

The PDFViewer component allows you to zoom the PDF document by:

  • Using the ZoomIn and ZoomOut buttons of the zoomInOut tool. The default zoom rate is 0.25 (25%), but it can be customized by setting the zoomRate property.
  • Choosing from predefined values or setting a custom one through the zoom tool.
  • Defining an initial zoom level by setting the zoom property to one of the following options:
    • a number value—The default zoom level is 1.25 (125%), but it can be customized to any desired number.
    • fitToPage—Zooms the PDF document to fit the available vertical space. This option ensures that the whole page is visible in the PDFViewer.
    • fitToWidth—Zooms the PDF document to fit the available horizontal space.

You can also limit the zooming levels by setting the minZoom and maxZoom properties.

The following example demonstrates the zoom property of the PDFViewer and the available zooming tools in action.

Change Theme
Theme
Loading ...

Selection Tool

The selection tool allows you to configure the pointer functionality inside the PDF document. To highlight a text, select the pointer icon button. To scroll the content by using the pointer, select the hand icon button.

The following example demonstrates the selection tools of the PDFViewer component.

Change Theme
Theme
Loading ...

Download Tool

The download tool allows you to download the viewed document. You can configure the name of the file by setting the saveFileName option. Set the saveOptions property to further configure proxy URLs, targets and others. The saveOptions property accepts a SaveOptions object.

The following example demonstrates the download tool of the PDFViewer component and how to set the file name of the downloaded file.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...