Watermark 0.4.2+

Facade API	Paid Version	Univer Server	Univer on Node.js	Preset
✅	-	-	-	❌ import via plugins

The watermark feature is designed to provide a flexible and secure watermark solution for web pages or applications. With this feature, developers can dynamically generate text or image watermarks on the page to prevent unauthorized use or dissemination of content. It supports multiple configurations.

Watermark supports three settings: UI interface, FacadeAPI, and plug-in configuration. Three types of watermarks are supported: user information type, custom image type, and custom text type. The display of watermarks only supports one type of display, and the priority is user information type > custom image type > custom text type.

Presets Installation

npm install @univerjs/watermark

pnpm add @univerjs/watermark

yarn add @univerjs/watermark

bun add @univerjs/watermark

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/presets/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/presets/preset-docs-core/locales/en-US';
import { UniverWatermarkPlugin } from '@univerjs/watermark';
import watermarkEnUS from '@univerjs/watermark/locale/en-US';
 
import '@univerjs/watermark/lib/index.css';
 
import '@univerjs/watermark/facade';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: Tools.deepMerge(
      {},
      UniverPresetDocsCoreEnUS,
      watermarkEnUS,
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverDocsCorePreset(),
  ],
  plugins: [
    UniverWatermarkPlugin,
  ],
});

Advanced Installation

npm install @univerjs/watermark

pnpm add @univerjs/watermark

yarn add @univerjs/watermark

bun add @univerjs/watermark

import { LocaleType, Tools } from '@univerjs/core';
import { UniverWatermarkPlugin } from '@univerjs/watermark';
import watermarkEnUS from '@univerjs/watermark/locale/en-US';
 
import '@univerjs/watermark/lib/index.css';
 
import '@univerjs/watermark/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      watermarkEnUS
    ),
  },
});
 
univer.registerPlugin(UniverWatermarkPlugin);

Config

univer.registerPlugin(UniverWatermarkPlugin, {
  textWatermarkSettings: {
    content: "Univer",
  }
})

Detailed configuration can be found on GitHub.

Facade API

Set Watermark

univerAPI.setWatermark("text", { content: "hello", repeat: true })

Remove Watermark

univerAPI.setWatermark(null);