找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

140

主题

257

帖子

1661

积分

超级版主

Rank: 8Rank: 8

积分
1661
Winny
超级版主   /  发表于:2022-7-3 00:21  /   查看:1935  /  回复:0
本帖最后由 Joestar.Xu 于 2023-12-14 17:50 编辑

在很多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. let pic
  3. html2canvas(document.getElementById("capture")).then(function(canvas) {
  4.     pic = canvas.toDataURL()
  5.     spread.options.backgroundImage = pic
  6.     spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
  7.     setTimeout(() => {
  8.         document.getElementById("ssvp_vp").style.backgroundRepeat = "repeat"
  9.     }, 10);
  10. })
复制代码

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. });
复制代码

设置完成之后,最终的显示效果如下:
image.png550258178.png
关于html2canvas的相关api大家可自行百度,spreadjs相关API可以参考学习指南或API文档.
详细的demo可以点击这里查看.

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部