Watermark & Password

This page describes how to add watermarks and how to validate passwords when loading protected documents.

Watermark Protection

Configure the document watermark via props.watermark. The watermark is drawn over the page canvas. Parameters:

text: String, watermark text (recommended ≤ 30 characters)
columns: Number, column count (default 4)
rows: Number, row count (default 4)
color: String, font color (default 'rgba(0, 0, 0, 0.2)'; any valid CSS color)
rotation: Number, rotation angle (default 30)
fontSize: Number, font size (default 12 * window.devicePixelRatio; unit: px)

Example:

const options = ref({
  watermark: {
    text: 'Internal document, do not leak',
    columns: 3,
    rows: 3,
    color: 'rgba(0, 0, 0, 0.1)',
    rotation: 25,
  },
})

Password

When previewing a protected document, the viewer will guide the user to enter a password and validate it:

needPassword: boolean
onValidatePassword(password) => boolean | Promise<boolean>

Workflow (simplified):

During loading, if a password is required, the viewer sets state.needPassword = true and waits for user input.
It validates the input using the configured onValidatePassword.
After validation succeeds, it continues loading the document with the password; when loading finishes, it emits the loaded event.

const options = ref({
  needPassword: true,
  // Tip: do not hardcode passwords in frontend code. Put validation on the server and use sessions/tokens; the frontend should only collect input and show feedback.
  onValidatePassword: (password) => password === '1234',
})

Themes Introduction