Open Thumbnail pane programmatically

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

The following steps are used to open the thumbnail.

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

Step 2: Use the following code snippet to open thumbnail.

Standalone

<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>

Server-Backed

<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 in GitHub