合同html样式,css 合同打印print--水印

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

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

A:

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

附件二 租赁房屋平面图

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

附件四 实际居住人信息表

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;

}

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