Composables
usePdfKitZoom
Zoom controls and scale management.
Manages zoom controls and scale for the PDF viewer.
Usage
const {
scale,
zoomMode,
zoomIn,
zoomOut,
setZoom,
zoomPercentage,
zoomPresets,
} = usePdfKitZoom()
Options
usePdfKitZoom({
initialScale: 1.0,
minScale: 0.25,
maxScale: 10.0,
scaleDelta: 1.1,
})
| Option | Type | Default | Description |
|---|---|---|---|
initialScale | number | ZoomLevel | 1.0 | Initial zoom scale or mode |
minScale | number | 0.25 | Minimum allowed zoom scale |
maxScale | number | 10.0 | Maximum allowed zoom scale |
scaleDelta | number | 1.1 | Multiplier for zoom in/out |
Return Values
| Property | Type | Description |
|---|---|---|
scale | Ref<number> | Current zoom scale |
zoomMode | Ref<ZoomLevel> | Current zoom mode |
zoomIn | () => void | Increase zoom level |
zoomOut | () => void | Decrease zoom level |
setZoom | (value: number | ZoomLevel) => void | Set specific zoom |
zoomPercentage | ComputedRef<number> | Zoom as percentage |
zoomPresets | number[] | Available zoom presets |
ZoomLevel Type
type ZoomLevel = 'auto' | 'page-fit' | 'page-width' | number
Example
<template>
<div class="flex items-center gap-2">
<UButton @click="zoomOut">-</UButton>
<span>{{ zoomPercentage }}%</span>
<UButton @click="zoomIn">+</UButton>
<UButton @click="setZoom('page-fit')">Fit Page</UButton>
<UButton @click="setZoom('page-width')">Fit Width</UButton>
</div>
</template>
<script setup>
const {
zoomIn,
zoomOut,
setZoom,
zoomPercentage
} = usePdfKitZoom()
</script>