1028

工作

问题：打印 pdf 时第二页没有水印

本地测试打印的时候，第二页是ok 的，服务端的 electron 环境是 2.x 版本的，打印的结果中第二页没有水印，使用的库是 gwm/github

代码大致为：

// 先插入水印
gwm.creation({ txt: '水印' }) // 默认挂载在 body 上
// 再插入 dom
document.body.innerHTML = dom

这种情况观察页面发现，滚动页面的时候，水印是不滚动的，水印只覆盖了当前屏幕内的元素

尝试修改为

html

<body>
  <div id="container"></div>
</body>

<script>
// 先插入水印
gwm.creation({ txt: '水印', container: '#container' }) // 默认挂载在 body 上
// 再插入 dom
const container = document.querySelector('#container')
container.innerHTML = dom
</script>

代码这么写，水印可以跟随着页面一起滚动，覆盖了所有页面，打印的时候第二页也有水印；

原因：

默认情况是在 body 里面新增一个固定在页面顶层的 div，这个 div 使用绝对定位的宽高，使用了 inset: 0px !important; 默认宽高就是占满当前屏幕大小；

可以看到使用如下 3 行代码效果：

html

<style>
  div {
    position: fixed;
    background: blue;
    inset: 0px !important;
  }
</style>
<body>
<div ></div>
</body>

查看这个页面的例子，可以看到第一个 div 元素的样式即是水印样式，手动编辑网页加入很多的 <br> 让内容高于屏幕高度，发现水印的高度不变，但是 body 内的高度变了，这就是为什么，第二页的内容没有显示出水印了，因为水印高度没有被内容撑开；

水印的样式如下：

css

element.style {
  pointer-events: none;
  z-index: 999999;
  animation: 0s ease 0s 1 normal none running undefined !important;
  inset: 0px !important;
  display: block !important;
  opacity: 1 !important;
  overflow: hidden !important;
  page: undefined !important;
  position: fixed !important;
  transition: undefined 0s ease 0s !important;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNThweCIgaGVpZ2h0PSIxMDBweCI+CiAgICAgICAgICAgICAgICA8dGV4dCB4PSIwcHgiIHk9IjUwcHgiIGR5PSIxMnB4IgogICAgICAgICAgICAgICAgICAgIHRleHQtYW5jaG9yPSJzdGFydCIKICAgICAgICAgICAgICAgICAgICBzdHJva2U9IiM4YTJiZTIiCiAgICAgICAgICAgICAgICAgICAgc3Ryb2tlLW9wYWNpdHk9IjAuMiIKICAgICAgICAgICAgICAgICAgICBmaWxsPSJub25lIgogICAgICAgICAgICAgICAgICAgIHRyYW5zZm9ybT0icm90YXRlKC0xNSwwIDUwKSIKICAgICAgICAgICAgICAgICAgICBmb250LXdlaWdodD0iMTAwIgogICAgICAgICAgICAgICAgICAgIGZvbnQtc2l6ZT0iMTIiCiAgICAgICAgICAgICAgICAgICAgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiCiAgICAgICAgICAgICAgICAgICAgPgogICAgICAgICAgICAgICAgICAgIDIwMjEvMTAvMjggVG9wIHNlY3JldAogICAgICAgICAgICAgICAgPC90ZXh0PgogICAgICAgICAgICA8L3N2Zz4=);
}

好文推荐

JavaScript算法基础及面试总结（1w1字）作者做了各个专题的分类，整理的很有序
手把手教你搭建一个无框架埋点体系
项目实战-埋点系统初探

1028 ​

工作 ​

好文推荐 ​

1028

工作

好文推荐