I am trying to use printJS to print a report using the content inside an html div and it is required to have repeating headers and footers on each page of the report. I used the solution I found in this link to generate the repeating headers and footers. However, the problem is that the content inside the tbody element overlaps with the content in the footer and header on chrome but not on firefox. The html code for the report is as something like this:
<div class="d-none font-weight-bold" id="printable_report">
<table>
<thead>
<tr>
<th class="text-center"><div class="header-space"> </div></th>
</tr>
</thead>
<tfoot>
<tr>
<td class="text-center"><div class="footer-space"> </div></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="page">
……content……
</div>
<div class="header-fill">I am the header</div>
<div class="footer-fill">I am the footer</div>
</td>
</tr>
</tbody>
</table>
</div>
I am using printJS plugin (https://github.com/crabbly/Print.js) for printing the document.
The printJS code for printing the report is this:
printJS({
documentTitle:"ETP Water Report",
printable: 'printable_report',
type: 'html',
targetStyles:"['*']",
font_size:"",
style:"@page{size: A4;margin-top:20mm;margin-bottom:20mm;}.page{page-break-after:always;} .header-space{height:100px !important;}.footer-space{height:100px !important;} .header-fill{position: fixed !important;top: 0 !important;height: 100px !important;width: 100% !important;}.footer-fill{position: fixed !important;bottom: 0 !important;height: 100px !important;width: 100% !important;} thead{display: table-header-group !important;}tfoot{display: table-footer-group !important;}"
});
Here are the images showing the mentioned problem:
The overlap is happening on google-chrome and not on firefox. Is there a way to resolve this issue? How do I prevent content overlap with header & footer on chrome? Somebody please help.
