Rotation
The PDFViewer includes built-in support for rotating documents in 90-degree increments. While the default toolbar includes rotation buttons, you may want to build custom controls or trigger rotation programmatically.
Programmatic Control
You can control rotation using the rotate plugin API.
Rotating the Active Document
To rotate whatever document is currently visible:
<script setup lang="ts">
import { ref } from 'vue';
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
const registry = ref<PluginRegistry | null>(null);
const handleReady = (r: PluginRegistry) => {
registry.value = r;
};
const rotateForward = () => {
const rotate = registry.value?.getPlugin('rotate')?.provides();
rotate?.rotateForward();
};
const rotateBackward = () => {
const rotate = registry.value?.getPlugin('rotate')?.provides();
rotate?.rotateBackward();
};
</script>
<template>
<PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>Rotating a Specific Document
To target a specific document:
<script setup lang="ts">
const setRotation = (rotation: number) => {
const rotate = registry.value?.getPlugin('rotate')?.provides();
const docRotate = rotate?.forDocument('invoice-123');
// Set specific rotation (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°)
docRotate?.setRotation(rotation);
};
</script>Listening for Changes
You can listen for rotation changes to keep your external UI in sync.
<script setup lang="ts">
import { PDFViewer, type PluginRegistry } from '@embedpdf/vue-pdf-viewer';
const handleReady = (registry: PluginRegistry) => {
const rotate = registry.getPlugin('rotate')?.provides();
// Subscribe to global rotation changes (any document)
rotate?.onRotateChange(({ documentId, rotation }) => {
console.log(`Document ${documentId} rotated to ${rotation * 90}°`);
});
// Or subscribe to a specific document
const docRotate = rotate?.forDocument('my-doc');
docRotate?.onRotateChange((rotation) => {
console.log(`My doc is now at ${rotation * 90}°`);
});
};
</script>
<template>
<PDFViewer @ready="handleReady" :config="{ src: '/doc.pdf' }" />
</template>Last updated on December 22, 2025
Need Help?
Join our community for support, discussions, and to contribute to EmbedPDF's development.