仅在打印最后一页显示固定粘性页脚的技术实现问询

针对你遇到的表格.table-blue-footer在打印时每页都出现的问题，我给你两种可行的方案——优先推荐纯CSS方案（适配现代浏览器），如果需要兼容更多旧版浏览器，可以用JS辅助实现：

方案一：纯CSS实现（依赖现代浏览器支持） #

核心思路是利用CSS打印媒体查询，默认隐藏footer，仅在打印的最后一页将其固定在页面底部：

/* 表格基础样式（可根据你的现有样式调整） */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 打印专属样式 */
@media print {
  /* 可选：让表格表头在每页顶部重复显示 */
  thead {
    display: table-header-group;
  }

  /* 默认隐藏footer，避免每页都显示 */
  .table-blue-footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* 匹配你原有footer的样式，示例蓝色主题 */
    background-color: #e3f2fd;
    padding: 8px 16px;
    border-top: 1px solid #90caf9;
    box-sizing: border-box;
    z-index: 10; /* 避免被页面内容遮挡 */
  }

  /* 清空打印页脚的默认系统内容 */
  @page :last {
    @bottom-center {
      content: "";
    }
  }

  /* 强制最后一页显示footer */
  body:last-child .table-blue-footer {
    display: block;
  }

  /* 优化表格分页，避免单行被截断 */
  tbody tr {
    page-break-inside: avoid;
  }
}

注意事项： #

• @page :last 目前在Chrome、Firefox、Edge等现代浏览器中支持良好，若需兼容旧版IE，建议使用方案二。
• 若你的表格不是100%宽度，需调整.table-blue-footer的left/right值或设置固定宽度，保证和表格对齐。

方案二：JavaScript辅助实现（兼容更多场景） #

如果纯CSS的浏览器支持度不满足需求，可以通过JS计算表格打印页数，动态控制footer的显示：

// 监听打印前事件
window.addEventListener('beforeprint', function() {
  const table = document.querySelector('table');
  const footer = document.querySelector('.table-blue-footer');
  // A4纸打印高度约为1123px，可根据实际纸张调整
  const pageHeight = 1123;
  
  // 计算表格总高度和打印总页数
  const tableHeight = table.offsetHeight;
  const totalPages = Math.ceil(tableHeight / pageHeight);
  
  // 默认隐藏footer
  footer.style.display = 'none';
  
  // 创建临时元素检测最后一页位置
  const tempMarker = document.createElement('div');
  tempMarker.style.position = 'absolute';
  tempMarker.style.top = `${(totalPages - 1) * pageHeight}px`;
  tempMarker.style.visibility = 'hidden';
  document.body.appendChild(tempMarker);
  
  // 判断临时元素是否处于最后一页，是则显示footer并固定在底部
  const markerPage = Math.ceil(tempMarker.getBoundingClientRect().top / pageHeight);
  if (markerPage === totalPages - 1) {
    footer.style.display = 'block';
    footer.style.position = 'fixed';
    footer.style.bottom = '0';
  }
  
  // 清理临时元素
  document.body.removeChild(tempMarker);
});

// 打印结束后恢复footer原有样式
window.addEventListener('afterprint', function() {
  const footer = document.querySelector('.table-blue-footer');
  footer.style.display = '';
  footer.style.position = '';
  footer.style.bottom = '';
});

注意事项： #

• 页面高度需根据实际打印纸张类型调整（如Letter纸约1056px）。
• 若表格内容动态更新，需在内容变更后重新执行上述计算逻辑。

这样调整后，无论你的表格是1页还是10页，.table-blue-footer都会仅在打印的最后一页底部显示啦！

内容的提问来源于stack exchange，提问作者Jithin Raj P R