HTML打印时如何不使用fixed定位将签名固定显示在每页底部

问题背景 #

我使用如下代码在HTML中往A4打印页面追加动态内容：

$('#result_body').append(
  '<div id=result_signature'+count+' class="footer" style="position: fixed;bottom:20px; right:20px">'+
  '<p>'+data[count].signature+'</p>'+
  '<br>'+ 
  '</div>'
)
$('#result_body').append( '<div class="pagebreak"> </div>')

当前遇到的问题：

• 使用fixed定位时，如果存在两个不同的签名，所有页面都会同时显示两个签名；仅存在一个签名时显示正常
• 使用relative定位时，签名可以正确显示在对应页面，但无法固定在页面底部
• 需求是无论内容是否跨多页，对应签名仅显示在所属打印页的底部

效果参考 #

relative定位效果 #

fixed定位效果 #

实现方案 #

fixed定位相对于打印视口全局生效，所以所有fixed元素会在每一页都渲染，要实现每页单独的底部签名，建议从分页容器布局入手，以下是兼容性最好的实现方式：

1. CSS样式配置 #

添加打印专属样式，给每一页套独立容器，用flex布局把签名顶到页面底部：

@media print {
  @page { 
    size: A4; 
    margin: 20px; /* 可根据实际需求调整页边距 */
  }
  .page-container {
    min-height: 297mm; /* A4标准高度 */
    display: flex;
    flex-direction: column;
    page-break-after: always;
  }
  .page-signature {
    /* 自动撑满上方空白，把签名顶到容器底部 */
    margin-top: auto;
    align-self: flex-end;
    margin-bottom: 20px;
    margin-right: 20px;
  }
  /* 原有分页元素可以弃用 */
  .pagebreak {
    display: none;
  }
}

2. JS逻辑修改 #

生成每一页内容时，把该页的正文和签名都包裹在page-container容器内即可：

// pageContent为当前页的所有正文内容
const pageContent = '/* 该页动态生成的正文内容 */'
$('#result_body').append(`
  <div class="page-container">
    ${pageContent}
    <div id="result_signature${count}" class="page-signature">
      <p>${data[count].signature}</p>
    </div>
  </div>
`)

如果内容是动态生成、无法提前预判分页位置，可以用print.js、pdfmake等专门的打印处理库自动处理分页逻辑。

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