Skip to content

Search Controller

searchControl

NameDescriptionType
goToMatchTo force the viewer to go to a match index(index: number) => void
nextSearchMatchTo go to the next match of a keyword highlight() => void
searchTo find a specific string in a PDF document(value: string) => void
searchingTo provide the searching statusRef<boolean>
searchMatchesThe total number of search matchesRef<{totalMatches: number; matches: {index: number; page: number}[]}>
prevSearchMatchTo go to the previous match of a keyword highlight() => void

Example

vue
<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 searchValue = ref<string>('')
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = () => {
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = () => {
    searchControl.value?.goToMatch(3)
  }
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </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>
vue
<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 searchValue = ref('')
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = () => {
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = () => {
    searchControl.value?.goToMatch(3)
  }
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </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>
vue
<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 searchValue = ref<string>('')
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = () => {
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = () => {
      searchControl.value?.goToMatch(2)
    }
    return {
      vpvRef,
      searchValue,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      goToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
})
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </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>
vue
<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 searchValue = ref('')
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = () => {
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = () => {
      searchControl.value?.goToMatch(2)
    }
    return {
      vpvRef,
      searchValue,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      goToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
}
</script>
<template>
  <div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </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>