如何用HTML和CSS为打印页面加顶部空白？解决Node.js转PDF重叠问题

问题情况 #

用Node.js把HTML转PDF时，生成的PDF多页显示异常，页眉和表格内容出现重叠。当前使用的CSS代码如下：

@media print {
   thead {
      display: table-header-group;
   }

   tr.page-break {
      page-break-before: always;
   }

   }
.header-section-0 {
    display: grid;
    position: fixed;
    top: 34px;
    left: 76px;
    right: 79px;
    height: 50px;
    z-index: 1000;
 }

修复步骤 #

1. 把页眉样式归到打印媒体查询里
   现在.header-section-0的样式在@media print外面，可能导致非打印场景的样式干扰，把它移到查询内部，确保只对打印生效：

   @media print {
      thead {
         display: table-header-group;
      }
   
      tr.page-break {
         page-break-before: always;
      }
   
      .header-section-0 {
         display: grid;
         position: fixed;
         top: 34px;
         left: 76px;
         right: 79px;
         height: 50px;
         z-index: 1000;
      }
   }
   

2. 给页面内容加顶部边距，避开页眉
   固定定位的页眉会覆盖页面内容，必须给body或者主内容容器设置足够的顶部边距，数值要大于页眉的top值+高度（这里是34px+50px=84px，多留6px余量）：

   @media print {
      /* 其他样式保留 */
      body {
         margin-top: 90px;
      }
      /* 如果有单独的内容容器，也可以给容器加内边距 */
      .content-container {
         padding-top: 90px;
      }
   }
   

3. 调整表格表头与页眉的间距
   确保每一页重复显示的thead不会和页眉贴太近，给thead或者表格加一点顶部间距：

   @media print {
      thead {
         display: table-header-group;
         margin-top: 10px;
      }
      /* 或者给表格整体加顶部边距 */
      table {
         margin-top: 10px;
      }
   }
   

4. 检查分页元素的样式
   避免tr.page-break的分页逻辑导致内容被截断到页眉区域，确保分页前的内容预留足够空间：

   @media print {
      tr.page-break {
         page-break-before: always;
         margin-top: 0;
      }
   }
   

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