SpreadJS显示水印实现

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

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

1. 创建html结构

1. <style>
   
2.         #capture{
   
3.             background: #eee;
   
4.             width: 400px;
   
5.             height: 200px;
   
6.             display: flex;
   
7.             align-items: center;
   
8.             justify-content:center;
   
9.             position: absolute;
   
10.             top:0;
    
11.             left: 0;
    
12.             z-index: -5
    
13.         }
    
14.         .fillText{
    
15.             width: 160px;
    
16.             height: 160px;
    
17.             line-height: 160px;
    
18.             transform: rotate(-30deg);
    
19.             font-size: 30px;
    
20.             color:#fff;
    
21.         }
    
22.     </style>
    
23.     <div id="capture">
    
24.         <p class="fillText">ZhangGuoGuo<p>
    
25.         <p class="fillText">ZhangGuoGuo<p>
    
26.     </div>
    
27.     <div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>

复制代码

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

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

1. let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
2. 
   
3. let pic
   
4. html2canvas(document.getElementById("capture")).then(function(canvas) {
   
5.     pic = canvas.toDataURL()
   
6.     spread.options.backgroundImage = pic
   
7.     spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
   
8.     setTimeout(() => {
   
9.         document.getElementById("ssvp_vp").style.backgroundRepeat = "repeat"
   
10.     }, 10);
    
11. })
    

复制代码

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

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

复制代码

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

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