本帖最后由 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);
- });
复制代码
设置完成之后,最终的显示效果如下:
关于html2canvas的相关api大家可自行百度,spreadjs相关API可以参考学习指南或API文档.
详细的demo可以点击这里查看.
|
|