# 水印

- Human documentation: [https://docs.univer.ai/zh-TW/guides/docs/features/watermark](https://docs.univer.ai/zh-TW/guides/docs/features/watermark)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/docs/features/watermark.md](https://docs.univer.ai/zh-TW/guides/docs/features/watermark.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [docs/features/watermark.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/docs/features/watermark.zh-TW.mdx)

---

#### Package metadata

```json
{
  "plugins": [
    {
      "client": "@univerjs/watermark",
      "facade": "@univerjs/watermark/facade"
    }
  ],
  "server": false
}
```

水印功能旨在為網頁或應用提供靈活且安全的水印方案。透過該功能，開發者可以在頁面上動態生成文字或圖片水印，以防止內容未經授權的使用或傳播。並支援多種配置。

> [!INFO]
> 使用[浮水印設定產生器](/tools/watermark-generator)調整浮水印樣式、即時預覽效果，並下載可用於外掛的 JSON 設定。

> Interactive example: [Open the playground](/playground/docs/watermark)

## 外掛模式

### 安裝

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### 使用

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const univer = new Univer({
  // ...
})

univer.registerPlugin(UniverWatermarkPlugin, { // [!code ++]
  textWatermarkSettings: { // [!code ++]
    content: 'Hello, Univer!', // [!code ++]
    fontSize: 36, // [!code ++]
  }, // [!code ++]
}) // [!code ++]
```

### 外掛與配置

#### @univerjs/watermark

本外掛提供了水印功能的核心實現。它允許開發者在應用中新增文字或圖片水印，並提供多種配置選項來客製化水印的外觀和行為。其提供了 `UniverWatermarkPlugin` 外掛。

參考：[@univerjs/watermark](https://docs.univer.ai/zh-TW/reference/packages/plugins/univerjs/watermark.md)

## 預設模式

水印並未提供預設模式，但支援與其外掛混用。

### 安裝

#### npm

```bash
npm install @univerjs/watermark
```

#### pnpm

```bash
pnpm add @univerjs/watermark
```

#### yarn

```bash
yarn add @univerjs/watermark
```

#### bun

```bash
bun add @univerjs/watermark
```

### 使用

```typescript
import { UniverWatermarkPlugin } from '@univerjs/watermark' // [!code ++]

import '@univerjs/watermark/facade' // [!code ++]

const { univerAPI } = createUniver({
  // ...
  presets: [
    UniverDocsCorePreset(),
  ],
  plugins: [
    [UniverWatermarkPlugin, { // [!code ++]
      textWatermarkSettings: { // [!code ++]
        content: 'Hello, Univer!', // [!code ++]
        fontSize: 36, // [!code ++]
      }, // [!code ++]
    }], // [!code ++]
  ],
})
```

## Facade API

### 引入

> [!INFO: 外掛模式提示]
> 僅外掛模式需要手動引入 Facade 套件。預設模式已內建對應的 Facade 套件，無需額外引入。

```typescript
import '@univerjs/watermark/facade'
```

### 設定水印

```typescript
univerAPI.addWatermark('text', { content: 'hello', repeat: true })
```

### 移除水印

```typescript
univerAPI.deleteWatermark()
```