如何打印带CSS和用户填写数据的表单？解决打印多空白页问题

问题分析 #

当前打印CSS仅通过visibility: hidden隐藏非打印元素，但该属性会保留元素的占位空间，原页面中未被打印的元素仍会占据页面高度，导致浏览器生成额外空白页。同时#imprimir设置绝对定位后，可能与页面默认边距、高度属性冲突，加剧空白页问题。

修复后的CSS代码 #

@media print {
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }
  .container-fluid {
    width: auto;
  }
  /* 直接移除非打印元素的占位空间 */
  body > *:not(#imprimir) {
    display: none;
  }
  #imprimir, #imprimir * {
    visibility: visible;
  }
  #imprimir {
    position: relative; /* 改用相对定位，避免绝对定位导致的布局溢出 */
    left: 0;
    top: 0;
    width: 100%;
    max-height: 100vh; /* 限制打印区域高度不超出单页 */
  }
}

额外排查要点 #

• 检查#imprimir内部内容是否存在超出单页高度的情况，若有可调整内容排版，或给长内容区块添加page-break-inside: avoid避免内容被强制拆分。
• 部分浏览器存在打印默认边距，可添加@page { margin: 0.5cm; }统一设置打印页边距，避免边距过大引发空白。

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