如何仅在打印预览最后一页的页脚区域固定页脚？

嘿，我懂你现在的困扰——打印动态内容时，想让页脚稳稳待在最后一页的页脚位置，而不是跟着正文尾巴飘在页面中间。看你给的代码和截图，问题出在当前的定位逻辑没结合打印场景的规则来设置，咱们调整一下就能解决。

先看看你原来的代码：

<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> 
</script> 
<script language="javascript" type="text/javascript"> 
function printDiv(divID) { 
    //Get the HTML of div 
    var divElements = document.getElementById(divID).innerHTML; 
    //Get the HTML of whole page 
    var oldPage = document.body.innerHTML; 
    //Reset the page's HTML with div's HTML only 
    document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>"; 
    //Print Page 
    window.print(); 
    //Restore orignal HTML 
    document.body.innerHTML = oldPage; 
} 
</script> 
</head> 
<body> 
<button onclick="myFunction()"> Print this page</button> 
<input type="button" value="Print 1st Div" onclick="javascript:printDiv('printablediv')" /> 
<script> 
function myFunction() { 
    window.print(); 
} 
</script> 
<div id="printablediv"> 
<table> 
<thead> 
<tr style="height:30px;"> 
<th> PAGE HEADER</th> 
</tr> 
<thead> 
<tfoot> 
<tr> 
<td id="spacer" style="height:200px;"> 
</td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
<td> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> </td> 
</tr> 
</tbody> 
</table> 
<div id="footer" style="position:relative; bottom: 0;"> Sample </div> 
</div> 
</body> 
</html>

核心解决方案：CSS打印媒体查询+精准定位 #

要搞定这个问题，关键是针对打印场景设置专属样式，让页脚只在最后一页的底部显示。这里给你两种靠谱的实现方法：

方法一：绝对定位+打印媒体查询

先调整HTML结构，再添加打印专属的CSS规则：

<!-- 调整后的HTML结构 -->
<div id="printablediv">
  <table>
    <thead>
      <tr style="height:30px;">
        <th> PAGE HEADER</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> content<br> content<br> content<br> <!-- 你的所有动态内容 --></td>
      </tr>
    </tbody>
  </table>
  <div id="footer"> Sample </div>
</div>

<!-- 添加专属CSS样式 -->
<style>
/* 平时隐藏页脚 */
#footer {
  display: none;
}

/* 打印时的专属配置 */
@media print {
  /* 设置打印页面边距，避免页脚被浏览器默认边距覆盖 */
  @page {
    margin: 2cm;
  }

  #printablediv {
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
  }

  /* 让页脚固定在打印页面的底部 */
  #footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    border-top: 1px solid #ccc;
  }

  /* 避免表格内容被分页截断 */
  table {
    page-break-inside: avoid;
  }
}
</style>

另外，你的printDiv函数可以优化得更稳定，不用替换整个body的HTML：

function printDiv(divID) {
  // 隐藏页面其他非打印元素
  const allElements = document.body.children;
  for (let elem of allElements) {
    if (elem.id !== divID) {
      elem.style.display = 'none';
    }
  }

  window.print();

  // 打印完成后恢复所有元素显示
  for (let elem of allElements) {
    elem.style.display = '';
  }
}

方法二：利用表格tfoot的打印特性

HTML表格的tfoot默认会在每一页底部显示，我们可以通过CSS让它只在最后一页出现：

<style>
@media print {
  @page {
    margin: 2cm;
  }

  /* 让表头在每页都显示 */
  thead {
    display: table-header-group;
  }

  /* 默认隐藏表脚，最后一页再显示 */
  tfoot {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-top: 1px solid #ccc;
  }

  /* 最后一页强制显示表脚 */
  body:last-child tfoot {
    display: table-footer-group;
  }

  table {
    page-break-inside: avoid;
  }
}
</style>

然后把页脚放到表格的tfoot里：

<table>
  <thead>
    <tr style="height:30px;">
      <th> PAGE HEADER</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> content<br> content<br> <!-- 你的所有动态内容 --></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sample</td>
    </tr>
  </tfoot>
</table>

小提示 #

• 不同浏览器的打印渲染逻辑有差异，建议在Chrome和Firefox都测试一下；
• @page设置的边距很重要，不然页脚可能会被浏览器默认边距挤到页面外；
• 打印场景下，position:relative定位页脚不可靠，优先用绝对定位或固定定位。

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