I need to print my HTML content in all the browsers with the header/footer repeating on every page. I have been successful in doing so perfectly in Chrome. Though in IE and Firefox also it is working but both these browsers do not work properly with css style - "page-break-inside: avoid" due to which it does not print content on first page but still on other pages it does print the header and footer.
Problem is with MAC safari. It just prints the header only once and does not print footer at all. My requirement is to print both header and footer repeatedly on each page.
Following is my sample print code. This code might prove helpful for somebody looking for printing in Chrome but can anyone please help me in printing the same in MAC safari as well.
Any help would be greatly appreciated.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
Print();
});
function Print() {
let data1 = [];
for (var i = 0; i < 140; i++) {
data1.push({ Title: "Item1." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
let data2 = [];
for (var i = 0; i < 50; i++) {
data2.push({ Title: "Item2." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })
}
var printWindow = this.window; // window.open("", "", "location=1,status=1,scrollbars=1");
printWindow.document.write("<body>");
printWindow.document.write("<style type='text/css' media='print'>");
printWindow.document.write("@page {margin: 10mm; }");
printWindow.document.write(" thead {display: table-header-group;} ");
printWindow.document.write(" tfoot {display: table-footer-group;} ");
printWindow.document.write(" #footerforprinter {");
printWindow.document.write("position: fixed;");
printWindow.document.write("bottom: 0;");
printWindow.document.write("}");
printWindow.document.write(" #footerforprinter td{");
printWindow.document.write("width: 100%;");
printWindow.document.write("overflow: hidden;");
printWindow.document.write("word-wrap: break-word;");
printWindow.document.write("}");
printWindow.document.write(" tr {page-break-inside: avoid;}\n ");
printWindow.document.write("</style><style type='text/css' media='screen'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>\n");
let style = '<style>\n ';
style += ' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} \n';
style += ' .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} \n';
style += ' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} \n ';
style += ' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}\n ';
style += ' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}\n ';
style += ' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} \n ';
style += '</style>';
printWindow.document.write(style);
printWindow.document.write("<form id='form1' runat='server'><div><table style='width:100%; margin: 0 auto;'>");
printHeader(printWindow);
printWindow.document.write("<tbody><tr><td>");
printData(printWindow, data1);
printData(printWindow, data2);
printWindow.document.write("</td></tr>");
printWindow.document.write("</tbody>");
printFooter(printWindow);
printWindow.document.write("</div></form></body>");
//printWindow.print();
printWindow.focus();
// printWindow.document.close();
}
function printData(printWindow, data) {
printWindow.document.write('<table class="t1">');
printWindow.document.write('<tr style="text-align:center; background-color:lightgray; font-weight:bold;"><td colspan="5">Sample Data</td></tr>');
printWindow.document.write('<tr><td class="headerCol"></td>');
printWindow.document.write('<td class="headerCol">Title 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 1</td>');
printWindow.document.write('<td class="headerCol" style="text-align:right">Value 2</td></tr>');
for (let x = 0; x < data.length; x++) {
printWindow.document.write('<tr><td class="firstCol">' + (x + 1).toString() + '</td>');
printWindow.document.write('<td class="dataCol1">' + data[x].Title + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value1 + '</td>');
printWindow.document.write('<td class="dataCol2">' + data[x].Value2 + '</td></tr>');
}
printWindow.document.write('</table>');
printWindow.document.write('<br/>');
}
function printHeader(printWindow) {
let fileName = "-------";
printWindow.document.write("<thead><tr><td>");
printWindow.document.write("<div style='width:100%; border:1px solid black;text-align:center;'>");
printWindow.document.write("<table style='width:100%;'>");
printWindow.document.write("<tr><td colSpan='2' style='text-align:center; font-weight:bold;'>Report</td></tr>");
printWindow.document.write("<tr><td>Report Date: " + new Date() + "</td>");
printWindow.document.write("<td style='float:right;'>Version: 1.0.0.0</td></tr>");
printWindow.document.write("<tr><td>File Name: " + fileName + "</td></tr>");
printWindow.document.write("</table>");
printWindow.document.write("</div></td></tr><tr style='height:20px;'></tr></thead>");
}
function printFooter(printWindow) {
printWindow.document.write("<tfoot>");
printWindow.document.write('<tr style="height: 30mm;"><td></td></tr>');
printWindow.document.write("</tfoot>");
printWindow.document.write("<table style='width:100%; left: 0; right: 0; padding-left:7px; padding-right:7px;' id='footerforprinter'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td>");
printWindow.document.write("<table style='width:100%; border:1px solid black;'>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 1</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 2</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span>Footer Line 3</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("<tr>");
printWindow.document.write("<td style='width:100%;'>");
printWindow.document.write("<span style='font-size:10px !important;'>© Dummy Info.</span>");
printWindow.document.write("</td>");
printWindow.document.write("</tr>");
printWindow.document.write("</table> ");
}
</script>
</head>
</html>
