Zoom Plugin

The Zoom Plugin provides a comprehensive set of tools for controlling the magnification of PDF documents. It supports standard zoom-in/out, preset zoom levels (like fit-to-page and fit-to-width), and an interactive marquee zoom (also known as area zoom).

Installation

This plugin is available as a separate package. You’ll also need the interaction-manager plugin if you plan to use the marquee zoom feature.

npm install @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager

pnpm add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager

yarn add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager

bun add @embedpdf/plugin-zoom @embedpdf/plugin-interaction-manager

Registration

Import ZoomPluginPackage and, if needed, InteractionManagerPluginPackage. Add them to the plugins array passed to the <EmbedPDF> component. You can configure the default zoom behavior upon registration.

import { createPluginRegistration } from '@embedpdf/core'
// ... other imports
import {
  ZoomPluginPackage,
  ZoomMode,
} from '@embedpdf/plugin-zoom/vue'
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/vue'
 
const plugins = [
  // ... other essential plugins like Loader, Viewport, etc.
  createPluginRegistration(DocumentManagerPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register the interaction manager (required for marquee zoom)
  createPluginRegistration(InteractionManagerPluginPackage),
 
  // Register and configure the zoom plugin
  createPluginRegistration(ZoomPluginPackage, {
    // Set the initial zoom level when a document loads
    defaultZoomLevel: ZoomMode.FitPage,
  }),
]
 
// ... rest of your component

Usage

The plugin exposes the useZoom composable to connect your UI components to its logic and state, and the <MarqueeZoom /> component for area selection.

Building a Zoom Toolbar

The useZoom composable is the primary way to interact with the plugin. It accepts a getter for documentId and returns the current zoom state and a provides object with methods to change the zoom for that document.

Here’s how you can build a custom toolbar:

<script setup lang="ts">
import { useZoom, ZoomMode } from '@embedpdf/plugin-zoom/vue'
 
const props = defineProps<{ documentId: string }>();
const { provides: zoom, state } = useZoom(() => props.documentId);
</script>
 
<template>
  <div v-if="zoom" class="toolbar">
    <span>{{ Math.round(state.currentZoomLevel * 100) }}%</span>
 
    <button @click="zoom.zoomOut()">-</button>
    <button @click="zoom.zoomIn()">+</button>
    <button @click="() => zoom.requestZoom(ZoomMode.FitPage)">Reset</button>
 
    <button @click="zoom.toggleMarqueeZoom()">Area Zoom</button>
  </div>
</template>

Adding Marquee (Area) Zoom

The marquee zoom feature allows users to click and drag a rectangle on a page to zoom into that specific area.

To enable this, place the <MarqueeZoom /> component inside the default slot of your <Scroller />. It must be wrapped in a PagePointerProvider.

<script setup lang="ts">
import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/vue';
import { MarqueeZoom } from '@embedpdf/plugin-zoom/vue';
</script>
 
<template>
  <Scroller :document-id="activeDocumentId">
    <template #default="{ page }">
      <PagePointerProvider
        :document-id="activeDocumentId"
        :page-index="page.pageIndex"
      >
        <RenderLayer :document-id="activeDocumentId" :page-index="page.pageIndex" />
        
        <!-- Marquee layer for area zoom -->
        <MarqueeZoom 
          :document-id="activeDocumentId" 
          :page-index="page.pageIndex" 
        />
      </PagePointerProvider>
    </template>
  </Scroller>
</template>

This requires the interaction-manager plugin to be registered. When a user clicks the “Area Zoom” button in the toolbar, toggleMarqueeZoom activates the mode, and the <MarqueeZoom /> component handles the user’s drag-and-drop interaction.

Live Example

This example combines the toolbar and the marquee zoom component into a complete viewer. Try clicking the area zoom button (the icon with the magnifying glass and crosshairs) and dragging a rectangle over the document.

API Reference

Configuration (ZoomPluginConfig)

You can pass these options when registering the plugin with createPluginRegistration:

Composable: useZoom(documentId)

This composable connects your component to the zoom plugin’s state and functions for a specific document.

Parameters

Returns

ZoomState Properties

ZoomScope Methods

Component: <MarqueeZoom />

Renders the visual rectangle when a user is selecting an area to zoom into.

Props