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?

Answer 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 .