Open the thumbnail pane programmatically in ASP.NET Core PDF Viewer

28 Feb 20262 minutes to read

Display page thumbnails by calling the openThumbnailPane() method. This enables quick navigation between pages and can be triggered automatically when the document loads or in response to user interactions.

Follow these steps to open the thumbnail pane:

Step 1: Follow the ASP.NET Core PDF Viewer getting started guide to set up a basic viewer with required Syncfusion scripts, styles, and service endpoints.

Step 2: Add a button and script to open the thumbnail pane on demand or automatically when the document loads:

<button type="button" onclick="openThumbnail()">Open Thumbnail Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   documentLoad="openThumbnail">
    </ejs-pdfviewer>
</div>

<script>
    function openThumbnail() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.thumbnailViewModule.openThumbnailPane();
    }
</script>
<button type="button" onclick="openThumbnail()">Open Thumbnail Pane</button>

<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/Index"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   documentLoad="openThumbnail">
    </ejs-pdfviewer>
</div>

<script>
    function openThumbnail() {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.thumbnailViewModule.openThumbnailPane();
    }
</script>

View sample on GitHub