JS实现打印功能时如何让headd类页眉在所有打印页重复显示

方案1：CSS固定定位实现（改动最小） #

你只需要修改打印媒体查询的CSS代码即可：

@media print {
  /* 先设置打印页面边距，给页眉预留位置，数值根据你的页眉高度调整 */
  @page {
    size: A4;
    margin-top: 160px; /* 比你的页眉高度大10-20px即可 */
  }
  body * {
    visibility:hidden;  
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position: static; /* 去掉原来的absolute定位，避免影响fixed页眉 */
    margin: 2mm;  
  }
  .headd {
    position: fixed; /* 固定定位，每页顶部都显示 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding : 20px 0 20px 0;
    margin-bottom:20px;
    border-bottom : 2px solid #0095c8;
    background: #fff; /* 加白色背景避免内容透上来 */
    box-sizing: border-box;
    padding-left: 2mm;
    padding-right: 2mm;
  }
  /* 给你的表单正文内容加外边距，避免第一页内容被页眉盖住 */
  #retorc6 {
    margin-top: 20px;
  }
  p {
    margin : 0;
  }
  .content11 {
    width: 100%;
    padding : 10px;
    height : 70px;
    border-bottom : 1px solid;
    text-align : center;  
  }
}

方案2：表格thead实现（兼容性最好） #

浏览器原生支持打印时自动重复表格的thead内容，适配所有主流浏览器，改动稍大但稳定性更高：

第一步：修改JS生成的HTML结构 #

把页眉放入<thead>，正文内容放入<tbody>：

var linha = ``;
// 包裹成表格结构
linha += `<table class="print-table" width="100%">
            <thead>
              <tr>
                <td>
                  <div class = "headd">
                    <!-- 你原来的页眉代码完整复制到这里，保持不变 -->
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                      <div class="img">
                        <img class="logo1 imag" src="./images/logo/logo.jpg" alt="">
                      </div>
                      <div><span class="logo2 título">xxxxx</span><span class="logo3 título">xxxxx</span></div>
                       <div class="logo4 dentro">xxxxxxx e xxxxxxxxx, lda.</div>
                       <div class="dentro" style="margin-top: 3%;">xxxx xxx xxxxxx, nº xxxx - xxxx-xxxx xxxx xxxx</div>
                       <div class="dentro">Tel. xxxx xxx xxxx</div>
                       <div class="dentro">xxxxxxxxxx@sapo.pt  <span class="logo5 dentro">www.facebook.com/xxxxxxxxx</span></div>
                     </div>
                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 fix-div14" style="float: right;">
                       <div class="form-group col-md-4" style="float: right;">  
                        <input type="text" class="form-control1 dentro" style="text-align: center;" value="1">
                        <span class="form-highlight"></span>
                        <span class="form-bar"></span>
                        <label class="label3 logo6 dentro" for="Orcamento">Orçamento Nº</label>        
                      </div>
                       <div class="form-group col-md-4" style="float: right;">  
                        <input type="text" class="form-control1 dentro" style="text-align: center;" value="2021-07-27">
                        <span class="form-highlight"></span>
                        <span class="form-bar"></span>
                        <label class="label3 logo7 dentro" for="Data">Aprovado</label>        
                      </div>
                      </div>
                    
                      <div style="float: right;" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 fix-div15">
                       <div class="dentro">Nº Cliente: xx</div>
                       <div class="dentro">xxxxxxxxxxxxxx</div>
                       <div class="dentro">xxxxxxxxxxxxx</div>
                       <div class="dentro">xxxxxxx - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                       <div class="dentro">xxxxxxxxx | xxxxxxxxxx</div>
                     </div>
                     <div style="margin-top: 3%; border-style: solid; border-bottom: 10px; border-right: 10px; border-left: 10px;"><div>
                     
                     
                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 logo11" style="margin-top: 2%;">
                        <div class="form-group col-md-12 título" style="text-align: center;"><span>Serviço: Fonecimento de móveis</span></div>
                     </div>
                  </div>
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <!-- 这里放你原来的所有表单正文内容 -->
                </td>
              </tr>
            </tbody>
          </table>`;
           
$("#retorc6").html(linha);

第二步：添加对应打印CSS #

@media print {
  .print-table thead {
    display: table-header-group; /* 核心属性，触发打印每页重复表头 */
  }
  .headd {
    padding : 20px 0 20px 0;
    margin-bottom:20px;
    border-bottom : 2px solid #0095c8;
  }
  /* 其余原有打印样式保持不变即可 */
}

注意事项 #

• 打印前请在浏览器打印设置中开启「打印背景色和图像」选项，避免页眉的边框、图片丢失
• 如果用方案1出现内容和页眉重叠，适当调大@page的margin-top数值即可
• 不要给页眉的父级元素设置overflow: hidden属性，会导致固定定位的页眉只在第一页显示

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