use*_*061 5 html javascript css jquery
我需要在所有浏览器中打印 HTML 内容，并在每个页面上重复页眉/页脚。我已经在 Chrome 中成功地完美地做到了这一点。虽然在 IE 和 Firefox 中它也可以工作，但是这两种浏览器都不能与 css 样式正常工作 - “page-break-inside:void”，因为它不会在第一页上打印内容，但仍然在其他页面上打印页眉和页脚。
\n\n问题出在 MAC safari 上。它只打印一次页眉，根本不打印页脚。我的要求是在每一页上重复打印页眉和页脚。
\n\n以下是我的示例打印代码。这段代码可能对那些在 Chrome 中寻找打印的人有帮助，但任何人都可以帮助我在 MAC safari 中打印相同的代码。
\n\n任何帮助将不胜感激。
\n\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n <title></title>\n\n <script>\n\n document.addEventListener("DOMContentLoaded", function (event) {\n Print();\n });\n\n function Print() {\n\n let data1 = [];\n\n for (var i = 0; i < 140; i++) {\n data1.push({ Title: "Item1." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })\n }\n\n let data2 = [];\n\n for (var i = 0; i < 50; i++) {\n data2.push({ Title: "Item2." + (i + 1).toString(), Value1 : Math.random(), Value2 : Math.random() })\n }\n\n var printWindow = this.window; // window.open("", "", "location=1,status=1,scrollbars=1");\n printWindow.document.write("<body>");\n printWindow.document.write("<style type=\'text/css\' media=\'print\'>");\n printWindow.document.write("@page {margin: 10mm; }");\n printWindow.document.write(" thead {display: table-header-group;} ");\n printWindow.document.write(" tfoot {display: table-footer-group;} ");\n\n printWindow.document.write(" #footerforprinter {");\n printWindow.document.write("position: fixed;");\n printWindow.document.write("bottom: 0;");\n printWindow.document.write("}");\n\n printWindow.document.write(" #footerforprinter td{");\n printWindow.document.write("width: 100%;");\n printWindow.document.write("overflow: hidden;");\n printWindow.document.write("word-wrap: break-word;");\n printWindow.document.write("}");\n\n printWindow.document.write(" tr {page-break-inside: avoid;}\\n ");\n\n printWindow.document.write("</style><style type=\'text/css\' media=\'screen\'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>\\n");\n let style = \'<style>\\n \';\n style += \' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} \\n\';\n style += \' .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} \\n\';\n style += \' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} \\n \';\n style += \' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}\\n \';\n style += \' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}\\n \';\n style += \' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} \\n \';\n style += \'</style>\';\n printWindow.document.write(style);\n printWindow.document.write("<form id=\'form1\' runat=\'server\'><div><table style=\'width:100%; margin: 0 auto;\'>");\n\n printHeader(printWindow);\n printWindow.document.write("<tbody><tr><td>");\n\n printData(printWindow, data1);\n printData(printWindow, data2);\n\n printWindow.document.write("</td></tr>");\n printWindow.document.write("</tbody>");\n\n printFooter(printWindow);\n\n printWindow.document.write("</div></form></body>");\n //printWindow.print();\n printWindow.focus();\n // printWindow.document.close();\n }\n\n function printData(printWindow, data) {\n\n printWindow.document.write(\'<table class="t1">\');\n\n printWindow.document.write(\'<tr style="text-align:center; background-color:lightgray; font-weight:bold;"><td colspan="5">Sample Data</td></tr>\');\n\n printWindow.document.write(\'<tr><td class="headerCol"></td>\');\n printWindow.document.write(\'<td class="headerCol">Title 1</td>\');\n printWindow.document.write(\'<td class="headerCol" style="text-align:right">Value 1</td>\');\n printWindow.document.write(\'<td class="headerCol" style="text-align:right">Value 2</td></tr>\');\n\n for (let x = 0; x < data.length; x++) {\n printWindow.document.write(\'<tr><td class="firstCol">\' + (x + 1).toString() + \'</td>\');\n printWindow.document.write(\'<td class="dataCol1">\' + data[x].Title + \'</td>\');\n printWindow.document.write(\'<td class="dataCol2">\' + data[x].Value1 + \'</td>\');\n printWindow.document.write(\'<td class="dataCol2">\' + data[x].Value2 + \'</td></tr>\');\n }\n\n printWindow.document.write(\'</table>\');\n printWindow.document.write(\'<br/>\');\n\n }\n\n function printHeader(printWindow) {\n\n let fileName = "-------";\n\n printWindow.document.write("<thead><tr><td>");\n printWindow.document.write("<div style=\'width:100%; border:1px solid black;text-align:center;\'>");\n printWindow.document.write("<table style=\'width:100%;\'>");\n printWindow.document.write("<tr><td colSpan=\'2\' style=\'text-align:center; font-weight:bold;\'>Report</td></tr>");\n printWindow.document.write("<tr><td>Report Date: " + new Date() + "</td>");\n printWindow.document.write("<td style=\'float:right;\'>Version: 1.0.0.0</td></tr>");\n printWindow.document.write("<tr><td>File Name: " + fileName + "</td></tr>");\n printWindow.document.write("</table>");\n printWindow.document.write("</div></td></tr><tr style=\'height:20px;\'></tr></thead>");\n }\n\n\n function printFooter(printWindow) {\n printWindow.document.write("<tfoot>");\n printWindow.document.write(\'<tr style="height: 30mm;"><td></td></tr>\');\n printWindow.document.write("</tfoot>");\n\n printWindow.document.write("<table style=\'width:100%; left: 0; right: 0; padding-left:7px; padding-right:7px;\' id=\'footerforprinter\'>");\n printWindow.document.write("<tr>");\n printWindow.document.write("<td>");\n printWindow.document.write("<table style=\'width:100%; border:1px solid black;\'>");\n printWindow.document.write("<tr>");\n printWindow.document.write("<td style=\'width:100%;\'>");\n printWindow.document.write("<span>Footer Line 1</span>");\n printWindow.document.write("</td>");\n printWindow.document.write("</tr>");\n\n printWindow.document.write("<tr>");\n printWindow.document.write("<td style=\'width:100%;\'>");\n printWindow.document.write("<span>Footer Line 2</span>");\n printWindow.document.write("</td>");\n printWindow.document.write("</tr>");\n\n printWindow.document.write("<tr>");\n printWindow.document.write("<td style=\'width:100%;\'>");\n printWindow.document.write("<span>Footer Line 3</span>");\n printWindow.document.write("</td>");\n printWindow.document.write("</tr>");\n printWindow.document.write("</table> ");\n printWindow.document.write("</td>");\n printWindow.document.write("</tr>");\n printWindow.document.write("<tr>");\n printWindow.document.write("<td style=\'width:100%;\'>");\n printWindow.document.write("<span style=\'font-size:10px !important;\'>\xc2\xa9 Dummy Info.</span>");\n printWindow.document.write("</td>");\n printWindow.document.write("</tr>");\n\n printWindow.document.write("</table> ");\n }\n\n </script>\n</head>\n</html>\n| 归档时间： |
|
| 查看次数： |
1670 次 |
| 最近记录： |