Default Zoom

Set the initial zoom level when a PDF is loaded. Choose between a preset zoom value or use fit-width mode as the default.

Default Zoom Level

The defaultZoom property allows you to specify the initial zoom level when a PDF document is loaded. This is useful for providing a better user experience by starting with an appropriate zoom level based on your application's layout or user preferences.

Supported Zoom Levels

The following zoom levels are supported:

0.5 – 50% zoom
0.67 – 67% zoom
0.75 – 75% zoom
0.9 – 90% zoom
1 – 100% zoom (actual size, default)
1.1 – 110% zoom
1.25 – 125% zoom
1.5 – 150% zoom
1.75 – 175% zoom
2 – 200% zoom

You can also set custom zoom values between 0.1 and 2.0, though they will be rounded to the nearest preset level.

Note: If both defaultZoom and setFitWidthDefault are set to active values, setFitWidthDefault takes precedence and will be used instead. Set only one to prevent conflicts.

Prop

Type

Implementation

import { PDFAtelier } from '@innosoft/pdf-atelier-react';

export default function DefaultZoomExample() {
  return (
    <PDFAtelier
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      defaultZoom={1.25}
      showZoom={true}
      showPageController={true}
    />
  );
}

Multiple Examples:

// Start at 75% zoom for wide layouts
<PDFAtelier src="/document.pdf" defaultZoom={0.75} license="..." />

// Start at 150% zoom for detailed reading
<PDFAtelier src="/document.pdf" defaultZoom={1.5} license="..." />

// Start at actual size (default)
<PDFAtelier src="/document.pdf" defaultZoom={1} license="..." />

import { Component } from '@angular/core';
import { PdfAtelierWrapper } from '@innosoft/pdf-atelier-angular';

@Component({
  standalone: true,
  selector: 'app-default-zoom',
  imports: [PdfAtelierWrapper],
  template: `
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="licenseKey"
      [defaultZoom]="1.25"
      [showZoom]="true"
      [showPageController]="true"
    ></pdf-atelier-wrapper>
  `,
})
export class DefaultZoomComponent {
  pdfSrc = '/document.pdf';
  licenseKey = 'YOUR_LICENSE_KEY';
}

Dynamic Zoom Example:

@Component({
  selector: 'app-dynamic-zoom',
  imports: [PdfAtelierWrapper, CommonModule],
  template: `
    <div class="zoom-controls">
      <button (click)="setZoom(0.75)">Small (75%)</button>
      <button (click)="setZoom(1)">Normal (100%)</button>
      <button (click)="setZoom(1.5)">Large (150%)</button>
    </div>
    <pdf-atelier-wrapper
      [src]="pdfSrc"
      [license]="licenseKey"
      [defaultZoom]="currentZoom"
    ></pdf-atelier-wrapper>
  `,
})
export class DynamicZoomComponent {
  pdfSrc = '/document.pdf';
  licenseKey = 'YOUR_LICENSE_KEY';
  currentZoom = 1;

  setZoom(zoom: number) {
    this.currentZoom = zoom;
  }
}

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';
import { ref } from 'vue';

const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';
const zoomLevel = ref(1.25);
</script>

<template>
  <PdfAtelierWrapper
    :src="pdfSrc"
    :license="licenseKey"
    :defaultZoom="zoomLevel"
    :showZoom="true"
    :showPageController="true"
  />
</template>

Responsive Zoom Example:

<script setup lang="ts">
import PdfAtelierWrapper from '@innosoft/pdf-atelier-vue';
import { ref, computed } from 'vue';

const pdfSrc = '/document.pdf';
const licenseKey = 'YOUR_LICENSE_KEY';
const isMobile = ref(window.innerWidth < 768);

// Set zoom based on device size
const zoomLevel = computed(() => isMobile.value ? 0.75 : 1.25);

window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth < 768;
});
</script>

<template>
  <PdfAtelierWrapper
    :src="pdfSrc"
    :license="licenseKey"
    :defaultZoom="zoomLevel"
  />
</template>

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import '@innosoft/pdf-atelier-core';
    </script>
  </head>
  <body>
    <!-- Start with 125% zoom -->
    <pdf-atelier
      src="/document.pdf"
      license="YOUR_LICENSE_KEY"
      default-zoom="1.25"
      show-zoom="true"
      show-page-controller="true"
    ></pdf-atelier>
  </body>
</html>

JavaScript Control Example:

<pdf-atelier
  id="pdfViewer"
  src="/document.pdf"
  license="YOUR_LICENSE_KEY"
></pdf-atelier>

<script type="module">
  import '@innosoft/pdf-atelier-core';

  const viewer = document.getElementById('pdfViewer');

  // Set default zoom after element is ready
  viewer.defaultZoom = 1.5;

  // Example: Detect device and set zoom accordingly
  if (window.innerWidth < 768) {
    viewer.defaultZoom = 0.75; // Mobile: 75%
  } else {
    viewer.defaultZoom = 1.25; // Desktop: 125%
  }
</script>

Use Cases

1. Mobile-Optimized Viewing

For mobile applications, start with a reduced zoom level to fit the entire page width:

<PDFAtelier src="/document.pdf" license="YOUR_LICENSE_KEY" defaultZoom={0.75} />

2. Document Review Interface

For detailed document review, start with an enlarged view:

<PDFAtelier src="/document.pdf" license="YOUR_LICENSE_KEY" defaultZoom={1.5} />

3. User Preference Persistence

Store and retrieve user's preferred zoom level from localStorage:

const [zoom, setZoom] = useState(() => {
  return parseFloat(localStorage.getItem('pdfZoom') || '1');
});

const handleZoomChange = (newZoom: number) => {
  setZoom(newZoom);
  localStorage.setItem('pdfZoom', newZoom.toString());
};

return <PDFAtelier src="/document.pdf" license="YOUR_LICENSE_KEY" defaultZoom={zoom} />;

Notes

The defaultZoom is applied only when a new PDF is loaded
Zoom changes made by the user are not automatically saved; implement persistence if needed
If a custom zoom value (not in the preset list) is set, it will be rounded to the nearest preset level when using the zoom dropdown
The zoom level persists across page navigation unless a new PDF is loaded

On this page