How can I help you?
Page thumbnail navigation in PDF Viewer
28 Feb 20265 minutes to read
Thumbnails are miniature representations of PDF pages that let users navigate visually. This feature displays page thumbnails and supports quick navigation between pages.
Enable or disable thumbnail navigation using the examples below.
<template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:documentPath="documentPath"
:resourceUrl="resourceUrl"
:enableThumbnail="true">
</ejs-pdfviewer>
</div>
</template>
<script setup>
import {
PdfViewerComponent as EjsPdfviewer,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide } from 'vue';
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
]);
</script><template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:documentPath="documentPath"
:resourceUrl="resourceUrl"
:enableThumbnail="true">
</ejs-pdfviewer>
</div>
</template>
<script>
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
} from '@syncfusion/ej2-vue-pdfviewer';
export default {
name: 'App',
components: {
'ejs-pdfviewer': PdfViewerComponent
},
data() {
return {
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
};
},
provide: {
PdfViewer: [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
]
}
};
</script><template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:serviceUrl="serviceUrl"
:documentPath="documentPath"
:enableThumbnail="true">
</ejs-pdfviewer>
</div>
</template>
<script setup>
import {
PdfViewerComponent as EjsPdfviewer,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide } from 'vue';
const serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
const documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
provide('PdfViewer', [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
]);
</script><template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:serviceUrl="serviceUrl"
:documentPath="documentPath"
:enableThumbnail="true">
</ejs-pdfviewer>
</div>
</template>
<script>
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
} from '@syncfusion/ej2-vue-pdfviewer';
export default {
name: 'App',
components: {
'ejs-pdfviewer': PdfViewerComponent
},
data() {
return {
serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer',
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
};
},
provide: {
PdfViewer: [
Toolbar,
Magnification,
Navigation,
LinkAnnotation,
BookmarkView,
ThumbnailView,
TextSelection
]
}
};
</script>