我需要在所有浏览器中打印HTML内容，并在每个页面上重复页眉/页脚。我已经成功地在Chrome中做到了这一点。尽管在IE和Firefox中也可以正常工作，但是这两种浏览器都无法以CSS样式正常运行-“ page-break-inside：避免” ，因为它不能在首页上打印内容在其他页面上，它确实会打印页眉和页脚。
MAC Safari出现问题。它只打印一次页眉，而根本不打印页脚。我的要求是在每页上重复打印页眉和页脚。
以下是我的示例打印代码。该代码可能对在Chrome中寻找打印内容的人很有帮助，但是任何人也可以帮助我在MAC野生动物园中进行打印。
任何帮助将不胜感激。
<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>