Composables
usePdfKitDocument
PDF document loading and management.
Handles PDF document loading and provides access to the PDF document instance.
Usage
const {
pdfDoc,
loading,
error,
progress,
numPages,
loadPdf,
getPage,
destroy,
} = usePdfKitDocument()
Options
usePdfKitDocument({
onLoad: (doc) => console.log('PDF loaded:', doc.numPages, 'pages'),
onError: (error) => console.error('Failed to load PDF:', error),
onProgress: (progress) => console.log('Loading progress:', progress, '%'),
})
| Option | Type | Description |
|---|---|---|
onLoad | (doc: PDFDocumentProxy) => void | Callback when PDF is loaded |
onError | (error: Error) => void | Callback on loading error |
onProgress | (progress: number) => void | Callback with loading progress (0-100) |
Return Values
| Property | Type | Description |
|---|---|---|
pdfDoc | Ref<PDFDocumentProxy | null> | The loaded PDF document instance |
loading | Ref<boolean> | Loading state |
error | Ref<string | null> | Error message if loading failed |
progress | Ref<number> | Loading progress (0-100) |
numPages | Ref<number> | Total number of pages |
loadPdf | (src: string) => Promise<void> | Function to load a PDF |
getPage | (pageNumber: number) => Promise<PDFPageProxy | null> | Get a specific page |
destroy | () => void | Clean up the document |
Example
<template>
<div>
<div v-if="loading">Loading... {{ progress }}%</div>
<div v-else-if="error">Error: {{ error }}</div>
<div v-else>Document has {{ numPages }} pages</div>
</div>
</template>
<script setup>
const {
loading,
error,
progress,
numPages,
loadPdf,
destroy
} = usePdfKitDocument({
onLoad: (doc) => console.log('Loaded!'),
})
onMounted(() => {
loadPdf('/document.pdf')
})
onUnmounted(() => {
destroy()
})
</script>