Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Navigation in Vue PDF Viewer component

12 May 2022 / 4 minutes to read

The PDF Viewer supports different internal and external navigations.

Toolbar page navigation option

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,

Copied to clipboard
<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>

Alt text

Also, you can programmatically perform page navigation options as follows.

Copied to clipboard
<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.

Bookmark navigation

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

Copied to clipboard
<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>

Alt text

Thumbnail navigation

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

Copied to clipboard
<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>

Alt text

Hyperlink navigation features enables navigation to the URLs (website links) in a PDF file.

Alt text

Table of content navigation

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

Copied to clipboard
<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,

Copied to clipboard
<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>

Alt text

See also

Previous
Next