Open and Close Bookmark pane programmatically

1 Apr 20242 minutes to read

The PDF Viewer library allows you to open the Bookmark pane programmatically using the openBookmarkPane() method.

The following steps are used to open the Bookmark.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Insert the following code snippet to implement the functionality for opening the Bookmark pane:

<button type="button" onclick="openBookmark()">Open Bookmark Pane</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
    function openBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.bookmarkViewModule.openBookmarkPane();
    }
</script>
<button type="button" onclick="openBookmark()">Open Bookmark Pane</button>

<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
    function openBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.bookmarkViewModule.openBookmarkPane();
    }
</script>

Similarly, to close the Bookmark pane programmatically, employ the following code snippet:

<button type="button" onclick="closeBookmark()">Close Bookmark Pane</button>
<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

<script>
 function closeBookmark() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        // close Bookmark pane
        pdfViewer.bookmarkViewModule.closeBookmarkPane();
    }
</script>
<button type="button" onclick="closeBookmark()">Close Bookmark Pane</button>

<div style="width:100%;height:600px">
    @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render()
</div>

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

View sample in GitHub