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 } from '@vue-pdf-viewer/viewer';
  import { ref } from 'vue';

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
  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">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</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%;
  }
}

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">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</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%;
  }
}

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<InstanceType<typeof VPdfViewer>>()
    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">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</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%;
  }
}

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">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</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%;
  }
}