Zoom

The EmbedPDF Snippet comes with a built-in zoom toolbar, but you can also control zoom behavior through configuration and the plugin API.

Configuration

You can set the default zoom level and limits in the initialization config.


import EmbedPDF, { ZoomMode } from 'https://cdn.jsdelivr.net/npm/@embedpdf/snippet@2/dist/embedpdf.js';
 
const viewer = EmbedPDF.init({
  type: 'container',
  target: document.getElementById('pdf-viewer'),
  zoom: {
    defaultZoomLevel: ZoomMode.FitPage, // or a number like 1.5
    minZoom: 0.5,
    maxZoom: 3.0
  }
});

Available Zoom Modes

The ZoomMode enum provides standard presets:

Mode	Description
`ZoomMode.Automatic`	Tries to find the best fit for the screen.
`ZoomMode.FitPage`	Fits the entire page within the view.
`ZoomMode.FitWidth`	Fits the page width to the view width.

Programmatic Control

You can control the zoom level from outside the viewer using the plugin registry. This is useful for building custom toolbars or resetting the view based on external events.

External Controls:

Accessing the API


import EmbedPDF, { ZoomMode } from 'https://cdn.jsdelivr.net/npm/@embedpdf/snippet@2/dist/embedpdf.js';
 
const viewer = EmbedPDF.init({
  type: 'container',
  target: document.getElementById('pdf-viewer'),
  documentManager: {
    initialDocuments: [
      {
        url: 'https://snippet.embedpdf.com/ebook.pdf',
        documentId: 'my-document-id'
      }
    ]
  }
});
 
const registry = await viewer.registry;
const zoomPlugin = registry.getPlugin('zoom').provides();
const docZoom = zoomPlugin.forDocument('my-document-id');
 
// Zoom In/Out
docZoom.zoomIn();
docZoom.zoomOut();
 
// Set specific zoom
docZoom.requestZoom(ZoomMode.FitWidth);
docZoom.requestZoom(1.5); // 150%

Listening to Zoom Changes

You can listen for zoom changes using the event system.


const registry = await viewer.registry;
const zoomPlugin = registry.getPlugin('zoom').provides();
const docZoom = zoomPlugin.forDocument('my-document-id');
 
// Subscribe to state changes
docZoom.onStateChange((state) => {
  console.log('Current Zoom:', state.currentZoomLevel);
});