Composables

usePdfKitSearch

Pencarian teks dengan penyorotan.

Menyediakan fungsionalitas pencarian teks lengkap dengan penyorotan hasil.

Penggunaan

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

Nilai yang Dikembalikan

Properti	Tipe	Deskripsi
`searchQuery`	`Ref<string>`	Kata kunci pencarian saat ini
`matches`	`Ref<SearchMatch[]>`	Array hasil pencarian
`currentMatchIndex`	`Ref<number>`	Indeks hasil saat ini (`-1` jika tidak ada)
`currentMatch`	`ComputedRef<SearchMatch \| null>`	Objek hasil saat ini
`totalMatches`	`ComputedRef<number>`	Total jumlah hasil
`hasMatches`	`ComputedRef<boolean>`	Apakah ada hasil
`isSearching`	`Ref<boolean>`	Pencarian sedang berlangsung
`searchOptions`	`Ref<SearchOptions>`	Opsi pencarian saat ini
`search`	`(pdfDoc, query, options?) => Promise<void>`	Melakukan pencarian pada dokumen PDF
`nextMatch`	`() => void`	Ke hasil berikutnya
`prevMatch`	`() => void`	Ke hasil sebelumnya
`clearSearch`	`() => void`	Menghapus hasil pencarian
`toggleCaseSensitive`	`() => void`	Mengaktifkan/menonaktifkan sensitivitas huruf
`toggleWholeWords`	`() => void`	Mengaktifkan/menonaktifkan pencarian kata utuh

Interface SearchMatch

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

SearchOptions

Opsi	Tipe	Default	Deskripsi
`caseSensitive`	`boolean`	`false`	Cocokkan huruf besar/kecil secara persis
`wholeWords`	`boolean`	`false`	Hanya cocokkan kata utuh

Contoh

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

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

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

// Kamu butuh instance PDFDocumentProxy, misalnya dari usePdfKitDocument()
const { pdfDoc } = usePdfKitDocument()

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

Fungsi search membutuhkan instance PDFDocumentProxy yang sudah dimuat sebagai argumen pertama. Gunakan bersama usePdfKitDocument untuk mendapatkan instance dokumen.

Ubah halaman iniatauLaporkan masalah

usePdfKitZoom

Kontrol zoom dan manajemen skala.

usePdfKitPageNavigation

Utilitas navigasi halaman.