Navigation in Vue Pdfviewer component

28 Sep 202324 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

• Go to page:- Navigates to the specific page of a PDF document.
• Show next page:- Navigates to the next page of PDF a document.
• Show previous page:- Navigates to the previous page of a PDF document.
• Show first page:- Navigates to the first page of a PDF document.
• Show last page:- Navigates to the last page of a PDF document.

You can enable/disable page navigation option in PDF Viewer using the EnableNavigation property and use the following code snippet,

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/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.

Standalone

<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"
            :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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/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>

Server-Backed

<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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/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.

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
            :enableBookmark="false">
      </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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :serviceUrl="serviceUrl"
          :documentPath="documentPath"
            :enableBookmark="false">
      </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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

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.

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :serviceUrl="serviceUrl"
          :documentPath="documentPath"
          :enableTextSearch="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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :serviceUrl="serviceUrl"
          :documentPath="documentPath"
          :enableTextSearch="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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
          :enableThumbnail="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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
          :serviceUrl="serviceUrl"
          :enableThumbnail="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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Hyperlink navigation

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

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.

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
          :enableHyperlink="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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
          :serviceUrl="serviceUrl"
          :enableHyperlink="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://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

You can change the open state of the hyperlink in the PDF Viewer by using the following code snippet.

Standalone

<template>
  <div id="app">
      <ejs-pdfviewer
          id="pdfViewer"
          :documentPath="documentPath"
          :enableHyperlink="true"
          :hyperlinkOpenState="hyperlinkOpenState">
      </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 {
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      hyperlinkOpenState:"NewTab"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

Server-Backed

<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, BookmarkView, Annotation, ThumbnailView, 
         Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);

export default {
  name: 'app',
  data () {
    return {
      serviceUrl:"https://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      hyperlinkOpenState:"NewTab"
    };
  },
  provide: {
    PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, 
                 Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},

}
</script>

See also

• Toolbar items
• Feature Modules