How to add a custom toolbar item to display current zoom percentage

When building a PDF document viewer with Nutrient Web SDK, you may want to display the current zoom percentage in the main toolbar. This enables your end users to view the exact zoom level in real time directly from the main toolbar. This enhances the viewing experience by providing more control over zoom adjustments.

Implementation steps

To implement this functionality, add a custom toolbar item that dynamically updates to show the current zoom percentage. This item will also let end users reset the zoom level to 100 percent with a single click.

The implementation involves:

1. Setting a default zoom level — Initialize the zoom at 100 percent when the viewer loads.

2. Creating a custom toolbar item — Add an item that displays the zoom percentage and updates dynamically.

3. Handling zoom changes — Use an event listener to track zoom adjustments and update the toolbar item accordingly.

For the complete implementation, refer to our playground demo.

Why a dynamic zoom percentage display matters

By integrating a custom toolbar item to display current zoom percentage, you provide your end users with a more intuitive way to manage document scaling. This enhances the end user experience and enables seamless zoom adjustments within your application.

To learn more, explore our Awesome Nutrient GitHub repository for a wide variety of sample projects, code snippets, and videos.