SpreadJS显示水印实现

收藏

本帖最后由 Joestar.Xu 于 2023-12-14 17:50 编辑

在很多web文档类系统中,需要在用户查看文档时显示水印,避免一些信息泄露.目前spreadjs支持单元格水印及打印水印,但不支持在整个spread上设置水印,这让不少客户十分头痛.本文通过借助spreadjs背景图片来实现显示水印.

在实际项目中,水印一般显示的是当前登录系统的用户名称,我们可以考虑使用一张包含用户名称的图片来作为spreadjs的背景图,从而实现显示水印的效果.但大部分客户不愿意去根据用户提前只做大量的图片,这样会比较麻烦一些.
其实我们可以采取其它一些方式来生成图片,例如通过canvas来动态绘制生成图片,但使用canvas直接绘制写起来略微困难,我们可以选择一些三方库,站在巨人的肩膀上,快速实现图片的生成.本文采用的就是html2canvas,核心实现代码如下:

1. 创建html结构

<style>
#capture{
background: #eee;
width: 400px;
height: 200px;
display: flex;
align-items: center;
justify-content:center;
position: absolute;
top:0;
left: 0;
z-index: -5
}
.fillText{
width: 160px;
height: 160px;
line-height: 160px;
transform: rotate(-30deg);
font-size: 30px;
color:#fff;
}
</style>
<div id="capture">
<p class="fillText">ZhangGuoGuo<p>
<p class="fillText">ZhangGuoGuo<p>
</div>
<div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>

复制代码

id为capture的DOM为后续我们要生成图片的目标DOM,在这里我设置了相关的背景及文字旋转,但由于它只是用来生成图片,并不需要在页面上显示,因此我们可以修改其层叠结构达到隐藏DOM的效果.

2. 生成图片并设置位spreadjs的背景

let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
let pic
html2canvas(document.getElementById("capture")).then(function(canvas) {
pic = canvas.toDataURL()
spread.options.backgroundImage = pic
spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
setTimeout(() => {
document.getElementById("ssvp_vp").style.backgroundRepeat = "repeat"
}, 10);
})

复制代码

3、另外为了防止切换sheet时水印失效，还需要添加下面这段代码：

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) {
setTimeout(() => {
document.getElementById("ssvp_vp").style.backgroundRepeat = "repeat"
}, 10);
});

复制代码

设置完成之后,最终的显示效果如下:
image.png550258178.png

关于html2canvas的相关api大家可自行百度,spreadjs相关API可以参考学习指南或API文档.
详细的demo可以点击这里查看.

		自动登录	找回密码
密码			立即注册

SpreadJS显示水印实现

0 个回复