Getting Started
Basic Usage
Learn the fundamentals of using KViewer in your Nuxt app
Minimal Example
pages/viewer.vue
<template>
<div class="h-screen">
<KViewer
:source="pdfUrl"
text-layer
user-name="Jane Doe"
/>
</div>
</template>
<script setup lang="ts">
const pdfUrl = '/documents/sample.pdf'
</script>
Load from Different Sources
The source prop accepts three formats:
URL String
<KViewer source="/documents/sample.pdf" />
Uint8Array
Load a PDF from a fetch response or file input:
<script setup lang="ts">
const response = await fetch('/api/document/123')
const buffer = await response.arrayBuffer()
const pdfBytes = new Uint8Array(buffer)
</script>
<template>
<div class="h-screen">
<KViewer :source="pdfBytes" />
</div>
</template>
File Input
Load a PDF from a user-selected file:
<template>
<div class="h-screen">
<KViewer v-if="pdfSource" :source="pdfSource" />
<input
v-else
type="file"
accept=".pdf"
@change="onFileSelect"
/>
</div>
</template>
<script setup lang="ts">
const pdfSource = ref<Uint8Array | null>(null)
async function onFileSelect(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0]
if (!file) return
const buffer = await file.arrayBuffer()
pdfSource.value = new Uint8Array(buffer)
}
</script>
Enable the Text Layer
Set text-layer to enable text selection and text-based annotation tools:
<KViewer :source="pdfUrl" text-layer />
The text layer is required for Highlight, Strikeout, and Underline tools. These tools work by detecting selected text ranges on the rendered page.
Use the Template Ref API
Access viewer methods through a template ref:
<template>
<div class="h-screen">
<KViewer ref="viewer" :source="pdfUrl" />
<button @click="onExport">Export PDF</button>
<button @click="onSaveDraft">Save Draft</button>
</div>
</template>
<script setup lang="ts">
const viewer = ref()
async function onExport() {
const bytes = await viewer.value?.exportPdf({ flatten: true })
// Upload bytes to your server, or trigger a download
}
function onSaveDraft() {
const annotations = viewer.value?.getAnnotations() ?? []
localStorage.setItem('draft', JSON.stringify(annotations))
}
</script>
Available Methods
| Method | Returns | Description |
|---|---|---|
getAnnotations() | IAnnotationStore[] | Get all current annotations |
importAnnotations(annotations, options?) | Promise<{ loaded, skipped }> | Restore saved annotations |
exportPdf(options?) | Promise<Uint8Array> | Export PDF with annotations |
getFormFieldValues() | FormFieldValue[] | Read all form field values |
setFormFieldValue(name, value) | void | Set a form field value |
getKonvaCanvasState() | Record<number, string> | Get raw Konva canvas state per page |
Next Steps
- Annotations -- Learn about the 14 annotation tools
- Form Fields -- Work with interactive PDF forms
- Export & Import -- Export PDFs and save annotation drafts
- Multi-Tab -- Manage multiple documents with KViewerTabs