Search Controller >=1.4.0

searchControl

Name	Description	Type
goToMatch	Move the viewer to the position of a specific search match. The position starts at 1	(position: number) => void
nextSearchMatch	To go to the next match of a keyword highlight	() => void
search	To find a specific string in a PDF document	(value: string) => void
searching	To provide the searching status	Ref<boolean>
searchMatches	The total number of search matches	Ref<{totalMatches: number; matches: {index: number; page: number}[]}>
prevSearchMatch	To go to the previous match of a keyword highlight	() => 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 searchValue = ref<string>('')
  const currentMatchPosition = ref(0)
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const searching = computed(() => searchControl?.value?.searching?.value)
  const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
  
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = (e: Event) => {
    e.preventDefault()
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = (position: number) => {
    if (totalMatches?.value && position <= totalMatches.value) {
      searchControl.value?.goToMatch(position)
    }
  }
  const handleGoToMatch = (event: Event) => {
    event.preventDefault()
    goToMatch(currentMatchPosition.value)
  }
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</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"
      />
    </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>

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 searchValue = ref('')
  const currentMatchPosition = ref(0)
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const searching = computed(() => searchControl?.value?.searching?.value)
  const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
  
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = (event) => {
    event.preventDefault()
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = (position) => {
    if (totalMatches?.value && position <= totalMatches.value) {
      searchControl.value?.goToMatch(position)
    }
  }
  const handleGoToMatch = (event) => {
    event.preventDefault()
    goToMatch(currentMatchPosition.value)
  }
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</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"
      />
    </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>

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 searchValue = ref<string>('')
    const currentMatchPosition = ref(0)
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const searching = computed(() => searchControl?.value?.searching?.value)
    const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
    
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = (event: Event) => {
      event.preventDefault()
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = (position: number) => {
      if (totalMatches?.value && position <= totalMatches.value) {
        searchControl.value?.goToMatch(position)
      }
    }
    const handleGoToMatch = (event: Event) => {
      event.preventDefault()
      goToMatch(currentMatchPosition.value)
    }
    return {
      vpvRef,
      searchValue,
      searching,
      currentMatchPosition,
      totalMatches,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      handleGoToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
})
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</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"
      />
    </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>

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 searchValue = ref('')
    const currentMatchPosition = ref(0)
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const searching = computed(() => searchControl?.value?.searching?.value)
    const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
    
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = (event) => {
      event.preventDefault()
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = (position) => {
      if (totalMatches?.value && position <= totalMatches.value) {
        searchControl.value?.goToMatch(position)
      }
    }
    const handleGoToMatch = (event) => {
      event.preventDefault()
      goToMatch(currentMatchPosition.value)
    }
    return {
      vpvRef,
      searchValue,
      searching,
      currentMatchPosition,
      totalMatches,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      handleGoToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
}
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</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"
      />
    </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>