Page Controller >=1.5.0

pageControl

Name	Description	Type	Version
`currentPage`	Return the page number of the current page	`number`	1.5.0
`getTextContent`	Return the text content of a specific page	`(page: number) =>` `Promise<TextContent>`	3.4.0
`goToPage`	To force the viewer to go to a certain page	`(page: number) => void`	1.5.0
`totalPages`	Return the total number of pages for a PDF document	`number`	1.5.0

Example

Composition TSComposition JSOption TSOption JS

vue

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

// Create a ref to hold the VPdfViewer component
const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
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 onPageChanged = (page: number) => {
  console.log('Current page is: ', page)
}
</script>

<template>
  <div id="vpv">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </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"
        @pageChanged="onPageChanged"
      />
    </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%;
  }
}
</style>

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 onPageChanged = (page) => {
  console.log('Current page is: ', page)
}
</script>

<template>
  <div id="vpv">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </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"
        @pageChanged="onPageChanged"
      />
    </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%;
  }
}
</style>

vue

<script lang="ts">
import { VPdfViewer } 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<InstanceType<typeof VPdfViewer>>()
    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 onPageChanged = (page: number) => {
      console.log('Current page is: ', page)
    }

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

<template>
  <div id="vpv">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </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"
        @pageChanged="onPageChanged"
      />
    </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%;
  }
}
</style>

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 onPageChanged = (page) => {
      console.log('Current page is: ', page)
    }

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

<template>
  <div id="vpv">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </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"
        @pageChanged="onPageChanged"
      />
    </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%;
  }
}
</style>

getTextContent

The getTextContent method allows you to extract text content from a specific page in the PDF document.

Parameters

Parameter	Type	Description
`page`	`number`	The page number to extract text from

Example

Composition TSComposition JSOption TSOption JS

vue

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

// Create a ref to hold the VPdfViewer component
const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
const pageControl = computed(() => vpvRef.value?.pageControl)
const pageNumber = ref<number>(1)

const extractText = async () => {
  if (!pageControl.value) return

  try {
    const content = await pageControl.value.getTextContent(pageNumber.value)
    console.log(content)
  } catch (error) {
    console.error('Error extracting text:', error)
  }
}
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        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 pageNumber = ref(1)

const extractText = async () => {
  if (!pageControl.value) return

  try {
    const content = await pageControl.value.getTextContent(pageNumber.value)
    console.log(content)
  } catch (error) {
    console.error('Error extracting text:', error)
  }
}
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        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 } 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<InstanceType<typeof VPdfViewer>>()
    const pageControl = computed(() => vpvRef.value?.pageControl)
    const pageNumber = ref<number>(1)

    const extractText = async () => {
      if (!pageControl.value) return

      try {
        const content = await pageControl.value.getTextContent(pageNumber.value)
        console.log(content)
      } catch (error) {
        console.error('Error extracting text:', error)
      }
    }

    return {
      vpvRef,
      pageControl,
      pageNumber,
      extractCurrentPageText
    }
  }
})
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        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 pageNumber = ref(1)

    const extractText = async () => {
      if (!pageControl.value) return

      try {
        const content = await pageControl.value.getTextContent(pageNumber.value)
        console.log(content)
      } catch (error) {
        console.error('Error extracting text:', error)
      }
    }

    return {
      vpvRef,
      pageControl,
      pageNumber,
      extractCurrentPageText
    }
  }
}
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>

Events

Slots

Slots - Tools

Page Controller >=1.5.0

pageControl

Example

getTextContent

Parameters

Example

Slots - Tools

Page Controller >=1.5.0 ​

pageControl ​

Example ​

getTextContent ​

Parameters ​

Example ​

Page Controller >=1.5.0

pageControl

Example

getTextContent

Parameters

Example