How to remove bookmark option from JavaScript PDF viewer?

2 mins read

Description:

This article explains how to remove or hide the Bookmark option from the JavaScript PDF Viewer control. This is useful when you want to streamline the viewer interface or prevent users from accessing the bookmarks panel in your application.

Solution:

To hide the built-in Bookmark toolbar item in the Syncfusion JavaScript PDF Viewer, you can simply use CSS to target and hide the bookmark button element by its ID.

Prerequisites:

Syncfusion PDF Viewer Setup: Ensure the Syncfusion PDF Viewer is properly configured in your JavaScript application. If not, refer to the Getting Started guide.
Basic Knowledge of HTML/CSS: A basic understanding of HTML structure and CSS styling.

Code Snippet:

index.html

To remove the bookmark button from the toolbar, add the following CSS rule in your HTML file:

<!-- Hide PDF viewer Bookmark option --> 
<style>
    #pdfViewer_bookmark {
        display: none !important;
    }
</style>

Key Features Used in the Code:

Syncfusion PDF Viewer Toolbar Integration: The PDF Viewer includes a built-in toolbar with options like bookmark navigation. The bookmark button can be targeted and customized using standard web techniques.
Bookmark Panel Toggle Button: The #pdfViewer_bookmark element corresponds to the bookmark toggle button in the PDF Viewer toolbar. By hiding this element via CSS, we effectively remove user access to the bookmark panel.
Lightweight UI Customization: This solution demonstrates how to customize the Syncfusion PDF Viewer’s UI without modifying the control’s logic or API, ensuring stability while meeting specific UX requirements.

Sample Link:

You can find the full sample in our GitHub repository.

Conclusion:

We hope you enjoyed learning about how to remove bookmark option from JavaScript PDF viewer.

You can refer to the JavaScript PDF feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications.

You can also explore our JavaScript PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)