打印时如何让内容/背景铺满整页高度，避免水印被裁剪？

问题描述 #

我实现了打印时为每页添加SVG背景水印的功能，但当页面内容未占满整页高度时，水印会被裁剪（比如示例中的“LORE”被裁成“LOR”）。需要解决这个问题，要么让每页的内容/背景铺满整页高度，要么从一开始就避免水印被裁剪。

方法1：强制内容容器铺满打印页高度 #

通过设置打印页面的边距规则，让内容容器强制占满单页剩余高度，确保水印背景不会因容器高度不足被裁剪。

修改后的CSS代码：

.content {
  position: relative;
  margin: 0;
}

@media print {
  /* 重置打印页默认边距，手动控制内容边距 */
  @page {
    margin: 0;
    size: auto;
  }
  body {
    margin: 1cm; /* 替代@page的默认边距，避免内容贴边 */
  }
  .content {
    min-height: calc(100vh - 2cm); /* 减去上下边距，确保容器铺满单页高度 */
    position: relative;
  }
  .content:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: 
      url('data:image/svg+xml;utf8,<svg style="transform:rotate(-90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><text x="0" y="25" fill="%23000">LORE</text></svg>') 
      0 0/100% 100%; /* 匹配容器尺寸，避免水印拉伸或裁剪 */
    opacity: 25%;
    -webkit-print-color-adjust: exact !important;
    pointer-events: none; /* 防止水印遮挡内容交互 */
  }
}

方法2：优化水印背景适配逻辑 #

不强制容器高度，通过调整SVG viewBox和背景属性，让水印自适应容器空间并完整显示。

修改后的水印样式代码：

@media print {
  .content:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: 
      url('data:image/svg+xml;utf8,<svg style="transform:rotate(-90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50"><text x="5" y="25" fill="%23000" text-anchor="start">LORE</text></svg>') 
      center / contain no-repeat; /* 用contain确保水印完整显示，居中定位 */
    opacity: 25%;
    -webkit-print-color-adjust: exact !important;
    pointer-events: none;
  }
}

如果需要水印重复铺满页面，可将background属性改为：

background: 
  url('data:image/svg+xml;utf8,<svg style="transform:rotate(-90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 50"><text x="5" y="25" fill="%23000" text-anchor="start">LORE</text></svg>') 
  0 0 / 20% auto repeat; /* 调整百分比控制水印重复密度 */

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>👋 Hello World!</h1>
<div class='content'>
  <a href="#" class="print">print</a>
  <div>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, deleniti obcaecati magnam optio enim, vitae nihil sed ad repellat modi necessitatibus sint. Repudiandae quaerat veritatis dolores consequatur blanditiis perferendis impedit?
  </div>
  <!-- 剩余内容保持原结构不变 -->
</div>

JavaScript #

$('.print').on('click', function () {
  setTimeout(function(){
    window.print();
  }, 1000);
})

内容的提问来源于stack exchange，提问作者kemal achmad