Composables

usePdfKitSearch

Text search with highlighting.

Provides full-text search functionality with match highlighting.

Usage

const {
  searchQuery,
  matches,
  currentMatchIndex,
  currentMatch,
  totalMatches,
  hasMatches,
  isSearching,
  searchOptions,
  search,
  nextMatch,
  prevMatch,
  clearSearch,
  toggleCaseSensitive,
  toggleWholeWords,
} = usePdfKitSearch()

Return Values

Property	Type	Description
`searchQuery`	`Ref<string>`	Current search query
`matches`	`Ref<SearchMatch[]>`	Array of search matches
`currentMatchIndex`	`Ref<number>`	Index of current match (`-1` when none)
`currentMatch`	`ComputedRef<SearchMatch \| null>`	Current match object
`totalMatches`	`ComputedRef<number>`	Total number of matches
`hasMatches`	`ComputedRef<boolean>`	Whether any match exists
`isSearching`	`Ref<boolean>`	Search in progress
`searchOptions`	`Ref<SearchOptions>`	Current search options
`search`	`(pdfDoc, query, options?) => Promise<void>`	Perform search on a PDF document
`nextMatch`	`() => void`	Go to next match
`prevMatch`	`() => void`	Go to previous match
`clearSearch`	`() => void`	Clear search results
`toggleCaseSensitive`	`() => void`	Toggle case sensitivity
`toggleWholeWords`	`() => void`	Toggle whole words

SearchMatch Interface

interface SearchMatch {
  pageIndex: number
  matchIndex: number
  text: string
}

SearchOptions

Option	Type	Default	Description
`caseSensitive`	`boolean`	`false`	Match case exactly
`wholeWords`	`boolean`	`false`	Match whole words only

Example

<template>
  <div class="flex items-center gap-2">
    <UInput 
      v-model="query" 
      placeholder="Search..." 
      @keyup.enter="performSearch"
    />
    <span v-if="hasMatches">
      {{ currentMatchIndex + 1 }} / {{ totalMatches }}
    </span>
    <UButton @click="prevMatch">Prev</UButton>
    <UButton @click="nextMatch">Next</UButton>
    <UButton @click="clearSearch">Clear</UButton>
  </div>
</template>

<script setup>
const query = ref('')

const {
  matches,
  currentMatchIndex,
  hasMatches,
  totalMatches,
  search,
  nextMatch,
  prevMatch,
  clearSearch,
} = usePdfKitSearch()

// You need a PDFDocumentProxy instance, e.g. from usePdfKitDocument()
const { pdfDoc } = usePdfKitDocument()

async function performSearch() {
  await search(pdfDoc.value, query.value)
}
</script>

The search function requires a loaded PDFDocumentProxy instance as its first argument. Pair it with usePdfKitDocument to get the document instance.

Edit this pageorReport an issue

usePdfKitZoom

Zoom controls and scale management.

usePdfKitPageNavigation

Page navigation utilities.