Watermarks

The designs and default layer below are available in vue-pdf-export@1.3.0. Earlier installations should follow their versioned reference.

For v1.3.0, an enabled watermark with no layer uses foreground. If your document previously depended on background placement, set layer: 'background' explicitly. The existing text, image, position and page-targeting fields remain available.

Design presets

design supplies defaults; every explicit option overrides its preset. For example, classic can still be used with type: 'image' and mode: 'repeat'.

import type { WatermarkOptions } from 'vue-pdf-export'

const watermark: WatermarkOptions = {
  enabled: true,
  design: 'classic',
  type: 'image',
  mode: 'repeat',
  layer: 'foreground',
  imageDataUrl: logoPngDataUrl,
  opacity: 0.14,
  rotation: -32,
  width: 20,
  gapX: 5,
  gapY: 5,
  pages: 'all',
}

imageDataUrl supports PNG or JPEG data URLs; imageUrl supports a reachable URL with appropriate CORS. Width and gaps use the configured jsPDF units. The source aspect ratio determines height when omitted. x and y position a single mark; repeated marks use a grid and gaps. A transparent PNG usually gives the cleanest foreground logo. Dense repeated images are composed into a reusable transparent page sheet. Full-page PNG backgrounds can increase file size.

For a styled stamp, pass a trusted mounted element, for example watermark: { enabled: true, type: 'html', htmlElement: stampRef.value } after the ref exists. The element is captured as an image once per export. Do not pass an untrusted HTML string. microtext is visible decoration, not a digital signature or tamper protection.

Selectable-text output can draw a real background mark behind its PDF content. Canvas output has opaque raster pages and uses a light foreground fallback to keep a requested background mark visible. An opaque content card can cover a selectable-text background mark. See media and typography.

Text watermark

import type { WatermarkOptions } from 'vue-pdf-export'

const watermark: WatermarkOptions = {
  enabled: true,
  layer: 'background',
  type: 'text',
  mode: 'repeat',
  text: 'CONFIDENTIAL',
  opacity: 0.1,
  rotation: -35,
  fontSize: 36,
  gapX: 100,
  gapY: 90,
}

<Html2Pdf :watermark="watermark" />

Foreground watermark

const watermark = {
  enabled: true,
  layer: 'foreground',
  type: 'text',
  mode: 'single',
  text: 'DRAFT',
  opacity: 0.15,
  rotation: -30,
  fontSize: 60,
  x: 0.5,
  y: 0.5,
}

Foreground watermarks are drawn onto final PDF pages with jsPDF.

Image watermark

const watermark = {
  enabled: true,
  layer: 'foreground',
  type: 'image',
  mode: 'single',
  imageUrl: '/logo.png',
  opacity: 0.1,
  rotation: -25,
  width: 180,
  x: 0.5,
  y: 0.5,
}

A data URL can also be used:

const watermark = {
  enabled: true,
  type: 'image',
  imageDataUrl: 'data:image/png;base64,...',
}

imageDataUrl takes priority over imageUrl.

Per-page watermark targeting

const watermark = {
  enabled: true,
  type: 'text',
  text: 'INTERNAL',
  pages: 'except-first',
}

Explicit pages:

const watermark = {
  enabled: true,
  text: 'INTERNAL',
  pages: [1, 3, 5],
}

Supported targets:

all
first
last
except-first
number[]

For selective targeting, a requested background watermark may be applied during final PDF post-processing so selected-page behavior can be preserved.

Watermark options