kviewer-docs
Guide

Signatures & Stamps

Add signatures and stamps to PDF documents

KViewer supports placing digital signatures and image stamps on PDF pages.

Signatures

Signatures are drawn or uploaded by the user, stored via custom handlers, and placed on pages using the signature tool.

Set Up Signature Handlers

Provide signatureHandlers to manage signature persistence:

<template>
  <div class="h-screen">
    <KViewer
      :source="pdfUrl"
      :signature-handlers="signatureHandlers"
    />
  </div>
</template>

<script setup lang="ts">
const pdfUrl = '/contract.pdf'

const signatureHandlers = {
  async onLoad(): Promise<SignatureData[]> {
    // Load saved signatures from your backend
    const response = await fetch('/api/signatures')
    return response.json()
  },

  async onSave(imageUrl: string): Promise<SignatureData> {
    // Save new signature (imageUrl is a base64 data URL)
    const response = await fetch('/api/signatures', {
      method: 'POST',
      body: JSON.stringify({ imageUrl }),
      headers: { 'Content-Type': 'application/json' },
    })
    return response.json()
  },

  async onDelete(id: string): Promise<void> {
    await fetch(`/api/signatures/${id}`, { method: 'DELETE' })
  },
}
</script>

SignatureHandlers Interface

interface SignatureHandlers {
  onLoad: () => Promise<SignatureData[]>
  onSave: (imageUrl: string) => Promise<SignatureData>
  onDelete: (id: string) => Promise<void>
}

interface SignatureData {
  id: string
  imageUrl: string  // Base64 data URL or image URL
  name?: string
}

How Signatures Work

  1. User selects the Signature tool in the toolbar
  2. If no signatures exist, a drawing modal opens for the user to draw their signature
  3. The signature is saved via onSave and added to the signature picker
  4. User clicks a saved signature to place it on the page
  5. The placed signature can be moved and resized

Stamps

Stamps are predefined images that users can place on pages. Define stamps as an array and pass them to the viewer.

Define Custom Stamps

<template>
  <div class="h-screen">
    <KViewer :source="pdfUrl" :stamps="stamps" />
  </div>
</template>

<script setup lang="ts">
const pdfUrl = '/document.pdf'

const stamps = [
  {
    id: 'approved',
    name: 'Approved',
    imageUrl: '/stamps/approved.svg',
    width: 48,
    height: 48,
  },
  {
    id: 'rejected',
    name: 'Rejected',
    imageUrl: '/stamps/rejected.svg',
    width: 48,
    height: 48,
  },
  {
    id: 'check',
    name: 'Check',
    imageUrl: '/stamps/check.svg',
    width: 16,
    height: 16,
  },
  {
    id: 'cross',
    name: 'Cross',
    imageUrl: '/stamps/cross.svg',
    width: 16,
    height: 16,
  },
]
</script>

StampDefinition Interface

interface StampDefinition {
  id: string          // Unique identifier
  name: string        // Display name in stamp picker
  imageUrl: string    // Image source (URL, SVG, or base64)
  previewUrl?: string // Optional preview thumbnail
  width?: number      // Default width in points
  height?: number     // Default height in points
}

How Stamps Work

  1. User selects the Stamp tool in the toolbar
  2. A stamp picker panel shows all available stamps
  3. User selects a stamp, then clicks on the page to place it
  4. The placed stamp can be moved and resized
SVG images work well for stamps because they scale cleanly at any size. Place stamp files in your public/stamps/ directory.

Multi-Tab Documents

Manage multiple PDFs in a tabbed interface

Customization

Customize the viewer UI with slots and configuration

Copyright © 2026