WebSDK目前提供两种水印实现方案：渲染层水印（View-layer Watermark）和文档层水印（Document-layer Watermark）。
渲染层水印采用前端渲染技术实现，仅作用于视图层显示，不会修改原始文档内容。该方案适用于文档阅读场景的水印展示需求，具有非侵入式特点。系统支持灵活配置水印位置，可实现单位置或多位置同时叠加的水印效果。
文档层水印通过直接修改PDF文档元数据实现，将水印信息永久写入指定页面。该方案适用于文档分发控制场景，下载后的文档仍保留水印信息。水印数据会持久化存储在PDF文件结构中。
在标准PDF文档处理场景中，WebSDK支持同时或单独使用两种水印方案。系统提供完整的API接口用于插入自定义文档水印（技术文档参见：https://support.fuxinsoft.cn/?p/4918）。但需注意，当PDF文档经过数字签名或加密处理导致编辑权限受限时，文档层水印接口将无法正常执行。此时建议采用渲染层水印方案，该技术通过PDF渲染引擎在视图层叠加水印元素，不涉及PDF文档对象的直接修改，因此不受文档加密状态的限制。
示例代码如下：
function getFormatDateWithSep(date, separator) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}${separator}${month}${separator}${day}`;
}
// 渲染水印 之 九宫格水印
function addRenderWaterMark() {
// 定义水印配置的通用部分
const commonConfig = {
type: "text",
content: `212999/李白n${getFormatDateWithSep(new Date(), '/')}`,
pageStart: 0,
pageEnd: 5,
watermarkSettings: {
offsetX: 0,
offsetY: 0,
scaleX: 1,
scaleY: 1,
rotation: 45,
opacity: 80
},
watermarkTextProperties: {
font: "SimSun",
fontSize: 50,
color: "#ff0000",
fontStyle: "normal",
lineSpace: 20,
alignment: "center"
}
};
// 定义九宫格的位置
const positions = [
"TopLeft",
"TopCenter",
"TopRight",
"CenterLeft",
"Center",
"CenterRight",
"BottomLeft",
"BottomCenter",
"BottomRight"
];
// 生成九宫格水印配置数组
const watermarkConfigs = positions.map(position => {
return {
...commonConfig,
watermarkSettings: {
...commonConfig.watermarkSettings,
position
}
};
});
pdfui.getPDFDocRender().then((docRender) => {
// 设置水印配置
docRender.setWatermarkConfig(watermarkConfigs);
});
// 重绘 PDF视图
pdfui.redraw(true);
}
//要在文档打开成功或渲染成功的监听事件回调函数中去执行 插入渲染水印的操作
pdfui.addViewerEventListener(Events.openFileSuccess, function () {
openFileError = null
loadingComponentPromise.then(function (component) {
component.close();
});
console.log("openFileSuccess");
addRenderWaterMark();
});
