Open or Hide the Bookmark Pane in PDF Viewer

22 Jul 20261 minute to read

The PDF Viewer exposes APIs to open and close the bookmark pane programmatically. Use openBookmarkPane() and closeBookmarkPane() to control the bookmark pane from application code.

Follow these steps to call the bookmark APIs from your application.

Step 1: Create a basic PDF Viewer sample using the getting started guide.

Step 2: Insert the following code snippet to open the bookmark pane:

<button onClick={openBookmark}>Open Bookmark Pane</button>

<script>
   function openBookmark() {
      var viewer = document.getElementById('container').ej2_instances[0];
      // Open Bookmark pane
      viewer.bookmarkViewModule.openBookmarkPane();
   }
</script>

To close the Bookmark pane programmatically, use the following code:

<button onClick={closeBookmark}>Close Bookmark Pane</button>

<script>
   function closeBookmark() {
      var viewer = document.getElementById('container').ej2_instances[0];
      // close Bookmark pane
      viewer.bookmarkViewModule.closeBookmarkPane();
   }
</script>

View sample in GitHub