Zoom Pages in Organize Pages in Vue PDF Viewer

14 Aug 20262 minutes to read

Overview

This guide explains how to change the thumbnail zoom level in the Organize Pages UI so you can view more detail or an overview of more pages.

Outcome: Page thumbnails resize interactively to suit your task.

Prerequisites

Steps

  1. Open the Organize Pages view

    • Click the Organize Pages button in the viewer toolbar to open the thumbnails panel.

  2. Locate the zoom control

    • Find the thumbnail zoom slider in the Organize Pages toolbar.

  3. Adjust zoom

    • Drag the slider to increase or decrease thumbnail size.

    Thumbnail zoom slider and preview

  4. Choose an optimal zoom level

    • Select a zoom level that balances page detail and the number of visible thumbnails for your task.

Expected result

  • Thumbnails resize interactively; larger thumbnails show more detail while smaller thumbnails allow viewing more pages at once.

Show or hide Zoom Pages button

To enable or disable the Zoom Pages button in the Organize Pages toolbar, update the pageOrganizerSettings. See Organize pages toolbar customization for the guidelines

Code snippet

To enable the zoom pages feature with the zoom slider, use the following code snippet:

<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl" :pageOrganizerSettings="{ showImageZoomingSlider: true }">
    </ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
  Annotation, FormDesigner, FormFields, PageOrganizer
} 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/32.2.3/dist/ej2-pdfviewer-lib"
    };
  },

  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
      Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]
  }
}
</script>

Troubleshooting