如何调整CSS打印样式，实现window.print时每个标签页内容单独分页打印

你只需要修改打印媒体查询的CSS样式即可，原有JS逻辑无需改动。修改后的完整打印样式如下：

@media print {
  /* 全局设置打印页面边距 */
  @page {
    margin: 2cm; /* 可根据需要调整页面整体边距 */
  }
  /* 隐藏不需要打印的元素 */
  .nav-tabs, #downloadPdf, hr {
    display: none !important;
  }
  /* 所有标签页内容强制显示 */
  .tab-content>.tab-pane {
    display: block !important;
    padding: 20px 0; /* 标签页内容内边距，可自行调整 */
  }
  /* 清除淡入效果的透明度影响 */
  .tab-content>.fade {
    opacity: 1;
  }
  /* 除最后一个标签页外，每个标签页结束后强制换页 */
  .tab-content>.tab-pane:not(:last-of-type) {
    page-break-after: always !important;
  }
}

改动说明 #

• 新增@page规则统一设置打印纸张的全局边距，避免内容紧贴纸张边缘
• 给每个.tab-pane添加了独立内边距，优化内容排版的留白效果
• 通过page-break-after: always属性实现标签页强制分页，使用:not(:last-of-type)选择器排除最后一个标签页，避免打印末尾多出空白页
• 额外添加了分隔线<hr>的隐藏规则，避免打印时出现多余的分隔线

替换完成后点击下载按钮触发打印，即可实现每个标签页内容单独占一页的效果，表单输入的内容也会正常带出。

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