Rotate Controller >=1.5.0

rotateController

Name	Description	Type
rotateClockwise	To force the viewer to rotate all pages in a clockwise direction of 90 degrees	() => void
rotateCounterclockwise	To force the viewer to rotate all pages in a counter clockwise direction of 90 degrees	() => void
currentRotation	Return the current rotation of the PDF document	(value: string) => void

Example

Composition TS

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

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref<VPVInstance | null>(null);
  const rotateControl = computed(() => vpvRef.value?.rotateControl)
  const currentRotate = computed(() => {
    return rotateControl.value?.currentRotation
  })

  const rotateClockwise = () => {
    if (!rotateControl.value) {
      return
    }
    rotateControl.value.rotateClockwise()
  }

  const rotateCounterClockwise = () => {
    if (!rotateControl.value) {
      return
    }
    rotateControl.value.rotateCounterclockwise()
  }
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</p>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>

Composition JS

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

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

  const rotateClockwise = () => {
    if (!rotateControl.value) {
      return
    }
    rotateControl.value.rotateClockwise()
  }

  const rotateCounterClockwise = () => {
    if (!rotateControl.value) {
      return
    }
    rotateControl.value.rotateCounterclockwise()
  }
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</p>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>

Options TS

<script lang="ts">
  import { VPdfViewer } 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<VPVInstance | null>(null)
    const rotateControl = computed(() => vpvRef.value?.rotateControl)
    const currentRotate = computed(() => {
      return rotateControl.value?.currentRotation
    })

    const rotateClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateClockwise()
    }

    const rotateCounterClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateCounterclockwise()
    }
    return {
      vpvRef,
      currentRotate,
      rotateClockwise,
      rotateCounterClockwise
    }
  }
})
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</p>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>

Options JS

<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 rotateControl = computed(() => vpvRef.value?.rotateControl)
    const currentRotate = computed(() => {
      return rotateControl.value?.currentRotation
    })

    const rotateClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateClockwise()
    }

    const rotateCounterClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateCounterclockwise()
    }
    return {
      vpvRef,
      currentRotate,
      rotateClockwise,
      rotateCounterClockwise
    }
  },
}
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</p>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>