Skip to content

Page Controller >=1.5.0

pageControl

NameDescriptionType
goToPageTo force the viewer to go to a certain page(page: number) => void
currentPageReturns the page number of the current pagenumber
totalPagesReturns the total number of pages for a PDF documentnumber
vue
<script setup lang="ts">
import { VPVInstance, VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'

// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance | null>(null)
const pageControl = computed(() => vpvRef.value?.pageControl)

const nextPage = () => {
  const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
  if (isLastPage) {
    return
  }
  pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}

const prevPage = () => {
  const isFirstPage = pageControl.value?.currentPage === 1
  if (isFirstPage) {
    return
  }
  pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}

const afterGoToPage = (page: number) => {
  console.log('gotoPage', page)
}
</script>

<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        @afterGoToPage="afterGoToPage"
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'

// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null)
const pageControl = computed(() => vpvRef.value?.pageControl)

const nextPage = () => {
  const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
  if (isLastPage) {
    return
  }
  pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}

const prevPage = () => {
  const isFirstPage = pageControl.value?.currentPage === 1
  if (isFirstPage) {
    return
  }
  pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}

const afterGoToPage = (page) => {
  console.log('gotoPage', page)
}
</script>

<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        @afterGoToPage="afterGoToPage"
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer, VPVInstance } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<VPVInstance>()
    const pageControl = computed(() => vpvRef.value?.pageControl)

    const nextPage = () => {
      const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
      if (isLastPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
    }

    const prevPage = () => {
      const isFirstPage = pageControl.value?.currentPage === 1
      if (isFirstPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
    }

    const afterGoToPage = (page: number) => {
      console.log('gotoPage', page)
    }

    return {
      vpvRef,
      nextPage,
      prevPage,
      afterGoToPage
    }
  }
})
</script>

<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        @afterGoToPage="afterGoToPage"
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'

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

    const nextPage = () => {
      const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
      if (isLastPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
    }

    const prevPage = () => {
      const isFirstPage = pageControl.value?.currentPage === 1
      if (isFirstPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
    }

    const afterGoToPage = (page) => {
      console.log('gotoPage', page)
    }

    return {
      vpvRef,
      nextPage,
      prevPage,
      afterGoToPage
    }
  }
}
</script>

<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </div>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        @afterGoToPage="afterGoToPage"
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>