Spire.OfficeJS 的编辑器支持自定义水印。你只需提供一个外部 JS 脚本，编辑器在渲染文档时会加载并执行它，在编辑区的画布上绘制平铺水印。水印绘制在编辑区的覆盖层上，不会写入文档内容，导出或下载的文件不包含水印。水印的文案、密度和颜色都由脚本决定，既可以显示固定文案，也可以拼接用户信息、日期等动态内容。下面介绍具体的实现方法，Word、PowerPoint、Excel 均可按此配置。

• 实现原理
• 配置水印脚本
• 编写水印脚本
• 设置水印前缀
• 水印效果
• 常见问题

实现原理

自定义水印涉及以下配置：

水印脚本运行在编辑器 iframe 内部，因此可以直接读取 window.name 并访问编辑区容器。下面依次介绍这些配置。

配置水印脚本

将 cusWaterMarkJs 加入 user.customization.public.common，值为水印脚本的可访问地址。该配置对三种编辑器通用：

<div id="editor"></div>
<script src="http://LocalExample:3000/web/editors/spireapi/SpireCloudEditor.js"></script>
<script>
var SERVER = 'http://LocalExample:3000';

var config = {
  fileAttrs: {
    fileInfo: { name: 'sample.docx', ext: 'docx' },
    sourceUrl: SERVER + '/samples/sample.docx'
  },
  user: {
    id: 'uid-1',
    name: 'Andy',
    customization: {
      public: {
        common: {
          cusWaterMarkJs: SERVER + '/files/waterMark.js' // 自定义水印脚本
        }
      }
    }
  },
  editorAttrs: {
    editorMode: 'edit',
    editorType: 'document',
    editorWidth: '100%',
    editorHeight: '600px',
    viewLanguage: 'zh',
    useWebAssemblyDoc: true,
    serverless: {
      useServerless: true,
      baseUrl: SERVER
    }
  }
};

new SpireCloudEditor.OpenApi('editor', config);
</script>

cusWaterMarkJs 为字符串类型的脚本地址，三种编辑器写法一致。切换文档类型时，按下表替换对应配置项（WebAssembly 开关均设为 true）：

编写水印脚本

新建脚本 waterMark.js，加载后按以下步骤执行：

1. 查找容器：Word 和 PowerPoint 使用 id_main_view，Excel 使用 editor_sdk。
2. 拼接文案：设置水印前缀（示例取自 window.name，也可直接写固定文本），与当前年月日拼成水印内容。
3. 绘制水印：把文案交给 canvasWM()，在画布上平铺绘制。
4. 自动执行：编辑器通常只加载脚本、不会主动调用，所以脚本末尾用一段自执行代码触发。

function insertWaterMark() {
  // 查找容器
  var container =
    document.getElementById('id_main_view') || // Word / PowerPoint
    document.getElementById('editor_sdk');      // Excel

  if (!container) return false;

  // 拼接文案
  var prefix = window.name || 'SpireCloudEditor';
  var today = new Date();
  var content = prefix + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

  canvasWM({ container: container, content: content });
  return true;
}

function canvasWM(options) {
  var container = options.container;
  var content = options.content;

  if (getComputedStyle(container).position === 'static') {
    container.style.position = 'relative';
  }

  var canvas = document.createElement('canvas');
  canvas.style.cssText =
    'position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:9999;';
  container.appendChild(canvas);

  function draw() {
    var width = container.clientWidth;
    var height = container.clientHeight;
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = 'rgba(220, 53, 69, 0.25)';
    ctx.font = '16px "Microsoft YaHei", Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    for (var y = -150; y < height + 150; y += 150) {
      for (var x = -240; x < width + 240; x += 240) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(-Math.PI / 6);
        ctx.fillText(content, 0, 0);
        ctx.restore();
      }
    }
  }

  draw();
  window.addEventListener('resize', draw);
}

(function () {
  var tries = 0;
  (function run() {
    if (insertWaterMark() || ++tries > 20) return;
    setTimeout(run, 300);
  })();
})();

设置水印前缀

脚本里的 window.name 就是编辑器 iframe 的名称，默认是 SpireCloudEditor，也是水印的默认前缀。

• 固定前缀：直接改 waterMark.js，例如 var prefix = 'E-ICEBLUE';。
• 按登录用户区分：保留 window.name 不变，在 web/editors/spireapi/SpireCloudEditor.js 的 GeneratFrame(config) 里把当前用户写进 iframe 名称：

iframe.name = (config.user && (config.user.name || config.user.id)) || 'SpireCloudEditor';

这样每个用户的 window.name 就是自己的用户名或 ID，前缀随用户变化。

水印效果

完成上述配置后打开文档，编辑区会平铺显示斜向的淡红色水印。下图示例中的水印即“用户名+ 当前日期”。

常见问题

水印没有显示

依次检查：

1. cusWaterMarkJs 地址能否被浏览器直接访问，脚本是否成功加载。
2. insertWaterMark() 中找到的容器 ID 是否与当前编辑器匹配（Word/PowerPoint 为 id_main_view，Excel 为 editor_sdk）。
3. 脚本加载后是否主动执行：编辑器通常只加载脚本，不会调用 insertWaterMark()；示例末尾的自执行代码会触发绘制，若被删改需要自行调用。
4. 是否实现了 canvasWM()：示例已包含完整实现；若替换为其他绘制方式，需要保证脚本中提供了该函数。

修改脚本后不生效

cusWaterMarkJs 指向的地址建议与站点同源，跨域时需配置 CORS，并确保以 text/javascript 等正确 MIME 类型返回。修改 SpireCloudEditor.js 或 waterMark.js 后，需清除浏览器缓存或强制刷新，避免加载旧版本。