打印模式下实现证书签名仅显示在最后一页底部的技术问题

针对证书打印时签名区域重复出现在所有页面的问题，核心原因是fixed定位会让元素在每一页重复渲染，同时原有动态margin计算无法精准匹配最后一页布局。以下是可行的解决方案：

核心修改思路 #

1. 放弃fixed定位，让签名区域作为文档流末尾元素
2. 利用CSS分页伪类仅在最后一页显示签名
3. 调整页面底部边距，确保签名不会被内容覆盖

修改后的CSS代码 #

@media print {
  .non-print-view {
    display: none;
  }
  footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    padding: 5px 1cm;
    background-color: #c2c3c5;
  }
  .for-print {
    display: block;
  }
  @page {
    size: A4;
    margin: 0mm 0mm 3cm 0mm; /* 底部留3cm空间给签名 */
  }
  /* 仅在最后一页显示签名 */
  @page :last {
    @top-left { content: ""; }
    @top-right { content: ""; }
  }
  body:last-of-type .signature {
    display: flex;
  }
  .watermark {
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: fixed !important;
    opacity: 0.1 !important;
    top: 50% !important;
    left: 50% !important;
    max-width: 440px;
    max-height: 540px;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    display: block !important;
  }
  .qrCode {
    align-self: end;
    padding-left: 10px !important;
  }
  /* 打印模式下签名默认隐藏，仅最后一页显示 */
  .signature {
    position: absolute;
    bottom: 1cm;
    left: 1cm;
    right: 1cm;
    display: none;
    margin: 0;
    padding: 1cm 0;
  }
}

@font-face {
  font-family: 'AKFont';
  src: url("{{ asset('assets/fonts/public/assets/fonts/arabic.ttf') }}");
}

/* 非打印模式下的签名样式保留 */
.signature {
  display: flex;
  justify-content: space-between;
  margin: 2cm 1cm;
  padding: 1cm 0;
}

.signature h2 {
  font-size: 15px;
  font-weight: bold;
}

.signature p {
  font-size: 14px;
  font-weight: bold;
}

修改后的HTML调整 #

移除原有动态margin计算，让签名区域自然落在文档末尾：

<!-- 替换原有的signature section -->
<section class="signature container">
  <div>
    <h2>پ.هـ.د. نه‌به‌ز ابراهیم محمد</h2>
    <p>هاریكارێ سه‌رۆكێ زانكویێ بۆ كاروبارێن قوتابیان</p>
  </div>
  <div>
    <h2>ديار هاشم مالو</h2>
    <p>توماركارێ زانكویێ</p>
  </div>
</section>

兼容性补充（可选） #

如果部分浏览器不支持@page :last伪类，可添加JS动态控制：

function printView() {
  const signature = document.querySelector('.signature');
  signature.style.display = 'none';

  setTimeout(() => {
    const pageHeight = 1123; // A4页面高度（px）
    const totalHeight = document.getElementById('printSection').offsetHeight;
    const pageCount = Math.ceil(totalHeight / pageHeight);
    
    if (pageCount === 1) {
      signature.style.display = 'flex';
    } else {
      const lastPageStart = (pageCount - 1) * pageHeight;
      if (signature.offsetTop >= lastPageStart) {
        signature.style.display = 'flex';
      }
    }
  }, 500);

  window.print();
  signature.style.display = 'flex';
}

关键说明 #

• @page :last伪类精准定位最后一页，确保签名仅在此页显示
• 页面底部预留3cm边距，避免签名被内容或footer覆盖
• 绝对定位让签名固定在页面底部区域，无需依赖动态margin计算

内容的提问来源于stack exchange，提问作者Azad Linavay