水印与密码

本文介绍如何为文档添加水印以及在加载受保护文档时进行密码校验。

水印保护

通过 props.watermark 可配置文档水印。水印会覆盖在页面画布上，参数如下：

• text：String，水印内容，建议不超过 30 个字符。
• columns：Number，水印列数，默认值为 4。
• rows：Number，水印行数，默认值为 4。
• color：String，字体颜色，默认值为 'rgba(0, 0, 0, 0.2)'，可选值为合法的 CSS 颜色值。
• rotation：Number，旋转角度，默认值为 30。
• fontSize：Number，字体大小，默认值为 12 * window.devicePixelRatio，单位为 px。

示例：

const options = ref({
  watermark: {
    text: '内部文件，请勿外泄',
    columns: 3,
    rows: 3,
    color: 'rgba(0, 0, 0, 0.1)',
    rotation: 25,
  },
})

密码保护

当预览受保护的文档时，插件引导用户输入密码并进行验证：

• needPassword（Boolean）：强制展示密码输入界面（或在检测到受保护的 PDF 文档时自动进入）。
• onValidatePassword(password: string) => boolean | Promise<boolean>：用于校验用户输入的密码；返回 true 视为通过。

工作流程（简化说明）：

• 文档加载阶段若检测到需要密码，插件会设置 state.needPassword = true，并等待用户输入
• 使用配置的 onValidatePassword 方法进行密码校验
• 当校验通过时，库会使用该密码继续加载文档；加载完成后触发 loaded 事件

示例：

const options = ref({
  needPassword: true,
  // 提示：密码不应在前端硬编码；建议将验证逻辑放在后端并结合会话或令牌校验，前端仅作为输入中转与提示。
  onValidatePassword: (password) => password === '1234',
})