在所有页面上打印相同的页眉

时间:2021-07-27 13:30:40

标签: javascript html css

我在 js 中创建了以下 dynaform,其标题如下:

document.getElementById("btnPrint1").onclick = function () {
    printElement(document.getElementById("printThis1")); 
}
function printElement(elem) {
    var domClone = elem.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    console.log($printSection);
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}

var linha = ``;

linha += `<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>`;
           
          $("#retorc6").html(linha);
@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;  
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
      margin: 2mm;  
  }
  .headd {
    padding : 20px 0 20px 0;
    margin-bottom:20px;
    border-bottom : 2px solid #0095c8;
  }
  p {
    margin : 0;
  }
  .content11 {
    width: 100%;
    padding : 10px;
    height : 70px;
    border-bottom : 1px solid;
    text-align : center;  
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<button type="button" class="btn btn-info show-side-btn" id="btnPrint1" data-show="show-side-navigation1" style="float:right;"><i class="fa fa-print" aria-hidden="true"></i></button>
<div style="clear:both;"></div>
               
<div id="printThis1" class="printThis1">
  <form role="form" action="#!" id="retorc6">
  </form>
</div>

如果我打印多于一页,我希望保留此页眉。

我正在使用 class="headd" 尝试在每个页面上重复标题。这个类的css我放在@media print 中,当我发送它进行打印时会被调用,但即便如此,标题只出现在我打印的第一页上,而不会出现在其他页面上。

谁能帮忙在打印的每一页上重复标题?

1 个答案:

答案 0 :(得分:1)

我最近做了,你需要把你所有的代码嵌入到一个表格中。

在那里您可以定义一个 CREAT TABLE table1(Connection 1) as SELECT * FROM database.dataTable(Connection 2),它将在每个页面中重复:在其中定义一个空白空间,以便放置一个固定的标题,例如 this answer 中使用的标题。< /p>

相关问题