Print the same header on all pages

Question

I have the following dynaform created in js that has the following header:

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>

I want this header to be kept if I print more than one page.

I'm using class="headd" to try to make the header repeat on every page. The css of this class I'm putting inside @media print to be called when I send it to print, but even so the header only appears on the first page I print and doesn't appear on the others.

Can anyone help repeat the header on every page that is printed?

score 1 · Accepted Answer · answered Jul 27 '21 at 13:36

1

I did it recently, you need to embed all your code into a table.

There you can define a <thead>, which will be repetead in every page: inside that you define an empty space, in order to place a fixed header, like the one used in this answer.

answered Jul 27 '21 at 13:36

aaandri98

585
4
18

I edited the question to show how I'm doing following your answer. The problem is that on the second page the content overlaps the header. Can you help? – Bruno Jul 27 '21 at 15:28
you should give a height (the same you gave to the fixed header) to the `article` class – aaandri98 Jul 27 '21 at 15:41

Print the same header on all pages

1 Answers1