css 合同打印print--水印_print-template 模板添加水印

最近做合同模板，发现原本的添加水印的方式出现了新bug。或者说原有的那种方式，忽略了一种特殊的情况：样式强加的打印页（page-break-after: always;）。

Q：利用js获取合同网页的宽高，来动态计算添加水印，强制打印页部分，水印未添加上？

A:

原因分析： 先附上原本的那种js动态添加水印的方式（通过js给网页加上水印背景），能解决大部分场景的需求。但是，它却没法计算到强加打印页的那部分高度，导致水印加不上。举个例子：合同模板一般后面都会需要添加一些附加内容，原因分析：

附件二 租赁房屋平面图

附件三 房屋来源证明文件复印件

附件四 实际居住人信息表
1
2
3
4
5

js动态加载添加的方式，会去获取合同网页的高度。这部分，它只能获取到5行文本的高度，但是，实际上打印时，附件二 租赁房屋平面图和附件三 房屋来源证明文件复印件都是单独的占用了一个打印页的，这就导致多出来的那部分一大片空白没有水印。
解决思路： 改用样式背景来解决。用position:fixed;加重复背景图的方式，代码如下：

/*水印*/
        .watermark{
            /*display: none;*/
            position: fixed;
            z-index: -1;
            left: 0;
            top: 0;
            width: 100%;
            /*height: 1134px;*/
            height: 100%;
            background: url(https://i.loli.net/2019/11/07/A81MQihFL4vaoY7.png) repeat 0 0;
            background-size: 220px 220px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

这种方式就能覆盖到每个打印页，不管是内容自动撑开的还是样式强加打印页的那种都可以。缺点：你需要更换图片，比如需要3种水印：合同草稿，已备案，已签约。那么就需要3个图片，每次改动需要修改图片。