Guide
Readonly Mode
Display PDFs in view-only mode without editing
Use readonly mode to display PDFs without annotation or form editing capabilities.
Enable Readonly Mode
<KViewer :source="pdfUrl" readonly />
Or on KViewerTabs:
<KViewerTabs :items="tabs" readonly />
What Readonly Disables
| Feature | Readonly |
|---|---|
| Annotation toolbar | Hidden |
| Drawing tools | Disabled |
| Form field editing | Disabled |
| Text selection | Still works |
| Search | Still works |
| Zoom & navigation | Still works |
| Page rotation | Still works |
Use Cases
- Document preview -- Show a PDF without allowing modifications
- Approval workflows -- Display a document for review before signing
- Public document sharing -- Embed a PDF viewer on a public page
- Print preview -- Show the final document before export
Example: Document Preview with Download
pages/preview.vue
<template>
<div class="h-screen">
<KViewer
ref="viewer"
:source="pdfUrl"
readonly
text-layer
>
<template #footer>
<div class="flex justify-end p-2 border-t">
<button @click="download">Download Original</button>
</div>
</template>
</KViewer>
</div>
</template>
<script setup lang="ts">
const viewer = ref()
const pdfUrl = '/documents/report.pdf'
async function download() {
const bytes = await viewer.value?.exportPdf()
const blob = new Blob([bytes], { type: 'application/pdf' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'report.pdf'
a.click()
URL.revokeObjectURL(url)
}
</script>