打印时两个表单之间分页失效，如何实现两个表单各占单独打印页？

• 你当前打印样式中给#printSection设置了position: absolute，绝对定位元素脱离正常文档流，CSS分页属性（page-break-*）仅对正常文档流中的元素生效，导致分页规则无法正常触发
• 你用visibility: hidden隐藏页面原有内容，隐藏后的元素仍然占用页面空间，会导致打印区域位置偏移、内容显示错位
• 你同时给table设置了page-break-after: always和两个表单之间加了.pagebreak分隔，分页规则重复本身不会影响生效，但前提是父级元素处于正常文档流

直接替换你现有的CSS代码即可，核心是调整打印区域的定位逻辑和页面元素隐藏规则：

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  /* 直接隐藏body下所有非打印区域，不占用页面空间 */
  body > *:not(#printSection) {
    display: none;
  }
  #printSection {
    /* 去掉绝对定位，保留边距即可，让打印区域处于正常文档流 */
    margin: 2mm;
  }
  table.report-container {
    page-break-after: always;
    /* 新增兼容现代浏览器的分页属性 */
    break-after: page;
  }
  thead.report-header {
    display: table-header-group;
  }
  tfoot.report-footer {
    display: table-footer-group;
  } 
  table.report-container div.article {
    page-break-inside: avoid !important;
    break-inside: avoid;
  }
  .pagebreak { 
    page-break-before: always;
    break-before: page;
  }
}

如果不需要双重分页规则，可以删掉两个表单之间的.pagebreak的div，只保留table的page-break-after: always即可，避免最后多出来空白页。测试时可以在浏览器打印预览中关闭页眉页脚选项、调整边距，确保内容适配页面尺寸。

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