Composables
usePdfKitDocument
Memuat dan mengelola dokumen PDF.
Composable ini menangani proses memuat dokumen PDF dan memberikan akses langsung ke instance dokumen PDF tersebut untukmu.
Cara Penggunaan
const {
pdfDoc,
loading,
error,
progress,
numPages,
loadPdf,
getPage,
destroy,
} = usePdfKitDocument()
Opsi
usePdfKitDocument({
onLoad: (doc) => console.log('PDF berhasil dimuat:', doc.numPages, 'halaman'),
onError: (error) => console.error('Gagal memuat PDF:', error),
onProgress: (progress) => console.log('Progress memuat:', progress, '%'),
})
| Opsi | Tipe | Deskripsi |
|---|---|---|
onLoad | (doc: PDFDocumentProxy) => void | Callback saat PDF berhasil dimuat |
onError | (error: Error) => void | Callback saat terjadi error pemuatan |
onProgress | (progress: number) => void | Callback progress pemuatan (0-100) |
Nilai Kembalian
| Properti | Tipe | Deskripsi |
|---|---|---|
pdfDoc | Ref<PDFDocumentProxy | null> | Instance dokumen PDF yang telah dimuat |
loading | Ref<boolean> | Status loading |
error | Ref<string | null> | Pesan error jika pemuatan gagal |
progress | Ref<number> | Progress pemuatan (0-100) |
numPages | Ref<number> | Total jumlah halaman |
loadPdf | (src: string) => Promise<void> | Fungsi untuk memuat PDF |
getPage | (pageNumber: number) => Promise<PDFPageProxy | null> | Mengambil halaman tertentu |
destroy | () => void | Membersihkan dokumen (cleanup) |
Contoh
<template>
<div>
<div v-if="loading">Memuat... {{ progress }}%</div>
<div v-else-if="error">Error: {{ error }}</div>
<div v-else>Dokumen memiliki {{ numPages }} halaman</div>
</div>
</template>
<script setup>
const {
loading,
error,
progress,
numPages,
loadPdf,
destroy
} = usePdfKitDocument({
onLoad: (doc) => console.log('Berhasil dimuat!'),
})
onMounted(() => {
loadPdf('/document.pdf')
})
onUnmounted(() => {
destroy()
})
</script>