repeat header and footer using printThis.js

Question

I would like to print large html content with header and footer repeat in all pages without overlapping using printThis.js plugin.

But header and footer is not repeating.

       
        $("#printKitten").click(function () {
            $("#divContent").printThis({                
                header: $('#divHeader').html,
                footer: $('#divFooter').html
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../Scripts/jquery-3.0.0.min.js"></script>
    <script src="../Scripts/printThis.js"></script>



    <button id="printKitten">Print</button>
    <div id="divHeader">
        HEADER <br />HEADER <br />HEADER <br />HEADER <br />HEADER <br />HEADER <br />
    </div>
    <div id="divContent">
        <p>Content placeholder START...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...END</p>

    </div>
    <div id="divFooter">
        footer <br />footer <br />footer <br />footer <br />footer <br />footer <br />
    </div>

I tried with @media print also but no luck.

Answer 1

printThis doesn't seem to have this feature.

You could request it.

In the meantime, you may want to consider this approach, using CSS. It makes use of a table element, where its thead and tfoot repeats, but its tbody doesn't repeat.

Quoting the basic setup:

<table class="report-container">
  <thead class="report-header"> </thead>
  <tfoot class="report-footer"> </tfoot>
  <tbody class="report-content"> </tbody>
</table>

Important notes according to author:

• Every <th> must live inside a <tr> to work
• <thead> must appear first in your <table>
• You can really have whatever you want appear in the <div class="header-info"> within the <th>, including other tables. It’s like it’s 1996 again!
• ! Very Important! <tfoot> must be after <thead> but before tbody>, even though it renders after <tbody>.

Main content

<tbody class="report-content"> 
   <tr> 
      <td>
        <div class="main">
            ...
        </div>
      </td>
   </tr>
</tbody>

CSS

thead.report-header {
   display: table-header-group;
}

tfoot.report-footer {
   display:table-footer-group;
}

tabel.report-container {
    page-break-after: always;
}

Go check that article. It's very well explained and may server as a great workaround.