Komponen
Metode
Metode yang tersedia untuk kontrol programatik.
Komponen NuxtPdfKit mengekspos objek controls melalui template ref yang bisa kamu gunakan untuk kontrol secara programatik.
Cara Menggunakan
<template>
<NuxtPdfKit ref="pdfViewer" src="/document.pdf" />
<button @click="goToPage5">Ke Halaman 5</button>
</template>
<script setup>
const pdfViewer = ref(null)
function goToPage5() {
pdfViewer.value?.controls.pageControl.goToPage(5)
}
</script>
Kontrol yang Tersedia
| Grup | Properti | Tipe | Deskripsi |
|---|---|---|---|
pageControl | goToPage | (page: number) => void | Pindah ke halaman tertentu |
pageControl | prevPage | () => void | Kembali ke halaman sebelumnya |
pageControl | nextPage | () => void | Lanjut ke halaman berikutnya |
pageControl | currentPage | number (readonly) | Nomor halaman saat ini |
pageControl | totalPages | number (readonly) | Total jumlah halaman |
zoomControl | zoomIn | () => void | Memperbesar tampilan |
zoomControl | zoomOut | () => void | Memperkecil tampilan |
zoomControl | setZoom | (level: number | ZoomLevel) => void | Mengatur level zoom spesifik |
zoomControl | scale | number (readonly) | Skala zoom saat ini |
zoomControl | zoomMode | ZoomLevel (readonly) | Mode zoom saat ini |
rotateControl | rotateClockwise | () => void | Putar +90° |
rotateControl | rotateCounterclockwise | () => void | Putar -90° |
rotateControl | rotation | number (readonly) | Rotasi saat ini (0, 90, 180, 270) |
searchControl | search | (query: string) => void | Melakukan pencarian |
searchControl | nextMatch | () => void | Ke hasil berikutnya |
searchControl | prevMatch | () => void | Ke hasil sebelumnya |
searchControl | clearSearch | () => void | Menghapus hasil pencarian |
searchControl | query | string (readonly) | Kata kunci pencarian saat ini |
searchControl | matches | SearchMatch[] (readonly) | Hasil pencarian |
searchControl | currentMatchIndex | number (readonly) | Indeks hasil saat ini |
printControl | print | () => void | Membuka dialog pencetakan |
downloadControl | download | () => void | Mengunduh file PDF |
viewControl | setViewMode | (mode: ViewMode) => void | Mengatur mode tampilan |
viewControl | setScrollMode | (mode: ScrollMode) => void | Mengatur mode gulir |
viewControl | toggleSidebar | () => void | Menampilkan/menyembunyikan sidebar thumbnail |
viewControl | toggleFullscreen | () => void | Mengaktifkan layar penuh |
viewControl | viewMode | ViewMode (readonly) | Mode tampilan saat ini |
viewControl | scrollMode | ScrollMode (readonly) | Mode gulir saat ini |
viewControl | isFullscreen | boolean (readonly) | Status layar penuh |
viewControl | isSidebarVisible | boolean (readonly) | Status sidebar |
themeControl | toggleTheme | () => void | Ganti tema terang/gelap |
themeControl | isDark | boolean (readonly) | Status mode gelap |
Navigasi Halaman
<script setup>
const pdfViewer = ref(null)
// Ke halaman 10
pdfViewer.value?.controls.pageControl.goToPage(10)
// Navigasi
pdfViewer.value?.controls.pageControl.nextPage()
pdfViewer.value?.controls.pageControl.prevPage()
</script>
Zoom
<script setup>
const pdfViewer = ref(null)
pdfViewer.value?.controls.zoomControl.zoomIn()
pdfViewer.value?.controls.zoomControl.zoomOut()
// Atur ke 150%
pdfViewer.value?.controls.zoomControl.setZoom(1.5)
// Sesuaikan halaman
pdfViewer.value?.controls.zoomControl.setZoom('page-fit')
// Sesuaikan lebar
pdfViewer.value?.controls.zoomControl.setZoom('page-width')
</script>
Rotasi
<script setup>
const pdfViewer = ref(null)
pdfViewer.value?.controls.rotateControl.rotateClockwise()
pdfViewer.value?.controls.rotateControl.rotateCounterclockwise()
</script>
Pencarian
<script setup>
const pdfViewer = ref(null)
pdfViewer.value?.controls.searchControl.search('invoice')
pdfViewer.value?.controls.searchControl.nextMatch()
pdfViewer.value?.controls.searchControl.clearSearch()
</script>
Cetak & Unduh
<script setup>
const pdfViewer = ref(null)
pdfViewer.value?.controls.printControl.print()
pdfViewer.value?.controls.downloadControl.download()
</script>
Mode Tampilan & Tema
<script setup>
const pdfViewer = ref(null)
// Mode tampilan dan gulir
pdfViewer.value?.controls.viewControl.setViewMode('dual')
pdfViewer.value?.controls.viewControl.setScrollMode('horizontal')
// Sidebar dan layar penuh
pdfViewer.value?.controls.viewControl.toggleSidebar()
pdfViewer.value?.controls.viewControl.toggleFullscreen()
// Tema
pdfViewer.value?.controls.themeControl.toggleTheme()
</script>
Contoh Lengkap
<template>
<div class="flex flex-col gap-4">
<!-- Kontrol Kustom -->
<div class="flex gap-2">
<UButton @click="pdfViewer?.controls.pageControl.prevPage()">Sebelumnya</UButton>
<UButton @click="pdfViewer?.controls.pageControl.nextPage()">Berikutnya</UButton>
<UButton @click="pdfViewer?.controls.zoomControl.zoomIn()">Perbesar</UButton>
<UButton @click="pdfViewer?.controls.zoomControl.zoomOut()">Perkecil</UButton>
<UButton @click="pdfViewer?.controls.rotateControl.rotateClockwise()">Putar</UButton>
<UButton @click="pdfViewer?.controls.printControl.print()">Cetak</UButton>
<UButton @click="pdfViewer?.controls.downloadControl.download()">Unduh</UButton>
</div>
<!-- PDF Viewer -->
<div class="h-[600px]">
<NuxtPdfKit ref="pdfViewer" src="/document.pdf" />
</div>
</div>
</template>
<script setup>
const pdfViewer = ref(null)
</script>