Zoom Controller >=1.9.0

zoomControl

Name	Description	Type
`zoom`	Force the viewer to zoom all pages to a specific scale. The scale can be a number. e.g. 0.1 (10%), 1 (100%) and 2 (200%), or a predefined `ZoomLevel`.	`(scale: number \| ZoomLevel) => void`
`scale`	Represent the current zoom level of the viewer as a scale factor	`number`

ZoomLevel

The ZoomLevel enumeration is used to define how pages will be scaled in the viewer.

ZoomLevel.ActualSize: Scale pages to their actual size (scale = 1 or 100%)
ZoomLevel.PageFit: Scale pages to fit entirely within the viewer container
ZoomLevel.PageWidth : Scales pages to match the full width of the viewer container

Example

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
  import { VPdfViewer, ZoomLevel } from '@vue-pdf-viewer/viewer';
  import { ref, unref } from 'vue';

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
  const zoomControl = computed(() => vpvRef.value?.zoomControl)
  const currentScale = computed(() => {
    return zoomControl.value?.scale
  })

  const zoom = (type: 'in' | 'out' | ZoomLevel) => {
    const zoomCtrl = unref(zoomControl)
    if (!zoomCtrl) return

    const scale = unref(currentScale)
    if (type === 'in') {
      scale && zoomCtrl.zoom(scale + 0.25)
    } else if (type === 'out') {
      scale && zoomCtrl.zoom(scale - 0.25)
    } else {
      zoomCtrl.zoom(type as ZoomLevel)
    }
  }
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="() => zoom('in')">Zoom In</button>
    </div>
    <div>
      <button @click="() => zoom('out')">Zoom Out</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.PageFit)">Page Fit</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.PageWidth)">Page Width</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.ActualSize)">Actual Size</button>
    </div>
    <div>
      <p>current scale is: {{ currentScale }}</p>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

vue

<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { ref, unref } from 'vue';

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref(null);
  const zoomControl = computed(() => vpvRef.value?.zoomControl)
  const currentScale = computed(() => {
    return zoomControl.value?.scale
  })

  const zoom = (type) => {
    const zoomCtrl = unref(zoomControl)
    if (!zoomCtrl) return

    const scale = unref(currentScale)
    if (type === 'in') {
      scale && zoomCtrl.zoom(scale + 0.25)
    } else if (type === 'out') {
      scale && zoomCtrl.zoom(scale - 0.25)
    } else {
      zoomCtrl.zoom(type)
    }
  }
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="() => zoom('in')">Zoom In</button>
    </div>
    <div>
      <button @click="() => zoom('out')">Zoom Out</button>
    </div>
    <div>
      <button @click="() => zoom('pageFit')">Page Fit</button>
    </div>
    <div>
      <button @click="() => zoom('pageWidth')">Page Width</button>
    </div>
    <div>
      <button @click="() => zoom('actualSize')">Actual Size</button>
    </div>
    <div>
      <p>current scale is: {{ currentScale }}</p>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

vue

<script lang="ts">
  import { VPdfViewer, ZoomLevel } from '@vue-pdf-viewer/viewer';
  import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const zoomControl = computed(() => vpvRef.value?.zoomControl)
    const currentScale = computed(() => {
      return zoomControl.value?.scale
    })

    const zoom = (type: 'in' | 'out' | ZoomLevel) => {
      const zoomCtrl = unref(zoomControl)
      if (!zoomCtrl) return

      const scale = unref(currentScale)
      if (type === 'in') {
        scale && zoomCtrl.zoom(scale + 0.25)
      } else if (type === 'out') {
        scale && zoomCtrl.zoom(scale - 0.25)
      } else {
        zoomCtrl.zoom(type as ZoomLevel)
      }
    }
    return {
      vpvRef,
      currentScale,
      zoom,
      ZoomLevel
    }
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="() => zoom('in')">Zoom In</button>
    </div>
    <div>
      <button @click="() => zoom('out')">Zoom Out</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.PageFit)">Page Fit</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.PageWidth)">Page Width</button>
    </div>
    <div>
      <button @click="() => zoom(ZoomLevel.ActualSize)">Actual Size</button>
    </div>
    <div>
      <p>current scale is: {{ currentScale }}</p>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

vue

<script>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { computed, ref } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref(null)
    const zoomControl = computed(() => vpvRef.value?.zoomControl)
    const currentScale = computed(() => {
      return zoomControl.value?.scale
    })

    const zoom = (type) => {
      const zoomCtrl = unref(zoomControl)
      if (!zoomCtrl) return

      const scale = unref(currentScale)
      if (type === 'in') {
        scale && zoomCtrl.zoom(scale + 0.25)
      } else if (type === 'out') {
        scale && zoomCtrl.zoom(scale - 0.25)
      } else {
        zoomCtrl.zoom(type)
      }
    }

    return {
      vpvRef,
      currentScale,
      zoom
    }
  },
}
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="() => zoom('in')">Zoom In</button>
    </div>
    <div>
      <button @click="() => zoom('out')">Zoom Out</button>
    </div>
    <div>
      <button @click="() => zoom('pageFit')">Page Fit</button>
    </div>
    <div>
      <button @click="() => zoom('pageWidth')">Page Width</button>
    </div>
    <div>
      <button @click="() => zoom('actualSize')">Actual Size</button>
    </div>
    <div>
      <p>current scale is: {{ currentScale }}</p>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>

Events

Slots

Slots - Tools

Interfaces

Zoom Controller >=1.9.0

zoomControl

ZoomLevel

Example

Slots - Tools

Zoom Controller >=1.9.0 ​

zoomControl ​

ZoomLevel ​

Example ​

Zoom Controller >=1.9.0

zoomControl

ZoomLevel

Example