前端打印带水印的页面内容过多打印预览多个页只有第一页显示水印，其它页都没显示水印问题解决

一、项目环境和架构

• vue3+element plus+vite
• 打印插件："vue3-print-nb": "0.1.4"
• 水印插件："watermark-js-plus": "1.5.6"

二、问题及解决方法

打印图一页面，会出现图二问题

图一：

图二：

网上也找了方案说时css样式问题，需要使用使用position: fixed来设置水印如下代码：

@media print { 
.watermark { 
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z - index: 9999;
        /* 其他水印样式，如透明度、字体大小等 */
    } 
}

我是用上面代码后再次打印，结果打印预览页面错乱，于是我又再网上找了些资料，结合自己的经验最后终于解决了，如下代码：

//
<div id="print-box">
    <div class="content-layer">
     </div>
</div>
            

id="print-box"是要打印的盒子，再里面加一层class="content-layer"盒子设置以下属性就可以完美解决了：

@media print {
    .content-layer {
        position: relative;
        z-index: 9998;
    }
}

感谢观看！喜欢的话请留一下一个赞！