Advanced
Contoh
Contoh penggunaan nyata Nuxt PDF Kit.
Berbagai contoh praktis yang menunjukkan cara penggunaan yang berbeda-beda.
Viewer Dasar
<template>
<div class="h-screen">
<NuxtPdfKit src="/sample.pdf" />
</div>
</template>
Mode Gelap
<template>
<NuxtPdfKit src="/document.pdf" theme="dark" />
</template>
Tampilan Dua Halaman
<template>
<NuxtPdfKit
src="/book.pdf"
initial-view-mode="dual-cover"
initial-scroll-mode="page"
/>
</template>
Terintegrasi dengan Kontrol Kustom
<template>
<div class="flex flex-col gap-4 p-4">
<div class="flex gap-2">
<UButton @click="pdfViewer?.prevPage()">Sebelumnya</UButton>
<UButton @click="pdfViewer?.nextPage()">Berikutnya</UButton>
<UButton @click="pdfViewer?.zoomIn()">Perbesar</UButton>
<UButton @click="pdfViewer?.zoomOut()">Perkecil</UButton>
</div>
<div class="h-[600px]">
<NuxtPdfKit
ref="pdfViewer"
src="/document.pdf"
:toolbar="{
pageNavigation: false,
zoom: false,
}"
/>
</div>
</div>
</template>
<script setup>
const pdfViewer = ref(null)
</script>
Memuat Secara Dinamis
<template>
<div class="flex flex-col gap-4">
<div class="flex gap-2">
<UButton
v-for="doc in documents"
:key="doc.path"
@click="currentPdf = doc.path"
>
{{ doc.name }}
</UButton>
</div>
<div class="h-[600px]">
<NuxtPdfKit
v-if="currentPdf"
:key="currentPdf"
:src="currentPdf"
/>
</div>
</div>
</template>
<script setup>
const currentPdf = ref(null)
const documents = [
{ name: 'Laporan', path: '/report.pdf' },
{ name: 'Panduan', path: '/manual.pdf' },
]
</script>
Viewer dalam Modal
<template>
<div>
<UButton @click="isOpen = true">Lihat PDF</UButton>
<UModal v-model:open="isOpen" fullscreen>
<template #content>
<NuxtPdfKit src="/document.pdf" />
</template>
</UModal>
</div>
</template>
<script setup>
const isOpen = ref(false)
</script>