集成 watermark-dom 实现页面水印

在某些场景下，为了防止用户通过截图或录屏泄露敏感信息，可以在页面中添加水印。下面将详细介绍如何集成 watermark-dom 库来实现网页水印的功能。

1. 添加 watermark-dom 依赖

首先，需要在项目的 package.json 文件中添加 watermark-dom 依赖：

{
  "dependencies": {
    "watermark-dom": "2.3.0"
  }
}

之后，运行以下命令安装依赖：

npm install

2. 在页面中引入和使用 watermark-dom

接下来，我们将水印功能集成到 AppMain.vue 文件中，以便在页面加载时自动显示水印。

首先，在 AppMain.vue 中引入 watermark-dom 模块：

import watermark from "watermark-dom";

然后，在 AppMain.vue 的 mounted 生命周期钩子中加载水印：

export default {
  name: "AppMain",
  mounted() {
    // 获取用户名，用作水印内容
    const username = this.$store.state.user.name;
    
    // 加载水印
    watermark.load({
      watermark_txt: `${username} - 保密水印`, // 水印内容
      watermark_x: 20, // 水印起始位置x轴坐标
      watermark_y: 20, // 水印起始位置Y轴坐标
      watermark_rows: 10, // 水印行数
      watermark_cols: 10, // 水印列数
      watermark_x_space: 100, // 水印x轴间隔
      watermark_y_space: 50, // 水印y轴间隔
      watermark_color: 'rgba(0, 0, 0, 0.15)', // 水印字体颜色
      watermark_fontsize: '18px', // 水印字体大小
      watermark_alpha: 0.5, // 水印透明度
      watermark_width: 120, // 水印宽度
      watermark_height: 80, // 水印高度
      watermark_angle: 15 // 水印倾斜度
    });
  }
};

3. 访问页面，检查水印效果

在配置完成后，重新运行项目并访问页面。此时，页面上应该能够显示带有用户名的水印。水印将覆盖整个页面，并且随着页面内容的滚动保持一致。

注意事项

1. 水印内容：在上述示例中，水印内容设置为 ${username} - 保密水印，即显示用户名及其后的文字“保密水印”。可以根据实际需要修改此内容。

2. 水印配置：可以通过 watermark.load 的配置参数来调整水印的位置、行列数、间距、颜色、字体大小、透明度等属性，以满足页面需求。

3. Excel 导出添加水印：如果需要在导出的 Excel 文件中添加水印，可以参考类似的思路，但需要使用相应的 Excel 处理工具，例如 POI 或 Aspose.Cells。