The PDF Viewer supports different internal and external navigations.
The default toolbar of PDF Viewer contains the following navigation options
You can enable/disable page navigation option in PDF Viewer using the EnableNavigation
property and use the following code snippet,
<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableNavigation="true" > </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
documentPath:"PDF_Succinctly.pdf"
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch]
}
}
</script>
Also, you can programmatically perform page navigation options as follows.
<template>
<div>
<button v-on:click="goToFirstPage">Go To First Page</button>
<button v-on:click="goToLastPage">Go To last Page</button>
<button v-on:click="goToNextPage">Go To Next Page</button>
<button v-on:click="goToPage">Go To Page</button>
<button v-on:click="goToPreviousPage">Go To Previous Page</button>
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"> </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields} from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
documentPath:"PDF_Succinctly.pdf",
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,Annotation, FormDesigner, FormFields]
},
methods: {
// Go To First Page
goToFirstPage: function () {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
viewer.navigation.goToFirstPage();
},
// Go To Last Page
goToLastPage: function () {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
viewer.navigation.goToLastPage();
},
// Go To Next Page
goToNextPage: function () {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
viewer.navigation.goToNextPage();
},
// Go To Page
goToPage: function () {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
viewer.navigation.goToPage(4);
},
// Go To Previous Page
goToPreviousPage: function () {
var viewer = document.getElementById('pdfViewer').ej2_instances[0];
viewer.navigation.goToPreviousPage();
}
}
}
</script>
Find the here to perform the page navigation options programmatically.
The Bookmarks saved in PDF files are loaded and made ready for easy navigation. You can enable/disable bookmark navigation by using the following code snippet.,
<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableBookmark="true" > </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
documentPath:"PDF_Succinctly.pdf"
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch]
}
}
</script>
Thumbnails is the miniature representation of actual pages in PDF files. This feature displays thumbnails of the pages and allows navigation. You can enable/disable thumbnail navigation by using the following code snippet.,
<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableThumbnail="true" > </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
documentPath:"PDF_Succinctly.pdf"
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch]
}
}
</script>
Hyperlink navigation features enables navigation to the URLs (website links) in a PDF file.
Table of contents navigation allows users to navigate to different parts of a PDF file that are listed in the table of contents section.
You can enable/disable link navigation by using the following code snippet.,
<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableHyperlink="true" > </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
documentPath:"PDF_Succinctly.pdf"
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]
}
}
</script>
You can change the open state of the hyperlink in the PDF Viewer by using the following code snippet,
<template>
<div id="app">
<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :enableHyperlink="true" :hyperlinkOpenState="hyperlinkOpenState" > </ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
documentPath:"PDF_Succinctly.pdf",
hyperlinkOpenState:"NewTab"
};
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation, ThumbnailView, Print, TextSelection, TextSearch]
}
}
</script>