Open Thumbnail pane programmatically
31 Oct 20232 minutes to read
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.
<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>