Повторить заголовок / нижний колонтитул во время печати html-страницы в MAC Safari

Мне нужно распечатать свой HTML-контент во всех браузерах с повторением заголовка / нижнего колонтитула на каждой странице. Я успешно справился с этим в Chrome. Хотя в IE и Firefox также работает, но оба этих браузера не работают должным образом с css-стилем - «page-break-inside: avoid», из-за чего он не печатает контент на первой странице, но все же на других страницах он печатает Верхний и нижний колонтитулы.

Проблема заключается в сафари MAC. Он просто печатает заголовок только один раз и вообще не печатает нижний колонтитул. Мое требование - печатать как верхний, так и нижний колонтитулы на каждой странице.

Ниже приведен мой пример кода печати. Этот код может оказаться полезным для кого-то, кто ищет печать в 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;}
 ");

            printWindow.document.write("</style><style type='text/css' media='screen'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>
");
            let style = '<style>
 ';
            style += ' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} 
';
            style += '  .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} 
';
            style += ' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} 
 ';
            style += ' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}
  ';
            style += ' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}
  ';
            style += ' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} 
 ';
            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;'>A© Dummy Info.</span>");
            printWindow.document.write("</td>");
            printWindow.document.write("</tr>");

            printWindow.document.write("</table> ");
        }

    </script>
</head>
</html>

javascript,jquery,html,css,

2

Ответов: 0

Повторить заголовок / нижний колонтитул во время печати html-страницы в MAC Safari

Мне нужно распечатать свой HTML-контент во всех браузерах с повторением заголовка / нижнего колонтитула на каждой странице. Я успешно справился с этим в Chrome. Хотя в IE и Firefox также работает, но оба этих браузера не работают должным образом с css-стилем - «page-break-inside: avoid», из-за чего он не печатает контент на первой странице, но все же на других страницах он печатает Верхний и нижний колонтитулы.

Проблема заключается в сафари MAC. Он просто печатает заголовок только один раз и вообще не печатает нижний колонтитул. Мое требование - печатать как верхний, так и нижний колонтитулы на каждой странице.

Ниже приведен мой пример кода печати. Этот код может оказаться полезным для кого-то, кто ищет печать в 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;}
 ");

            printWindow.document.write("</style><style type='text/css' media='screen'> thead {display: table-header-group} tfoot {display: table-footer-group}</style>
");
            let style = '<style>
 ';
            style += ' .t1{border: 1px solid black;border-collapse: collapse; font-size: 11px; margin-left:0px} 
';
            style += '  .t1 th, .t1 td {border: 1px solid black;border-collapse: collapse;} 
';
            style += ' .headerCol {text-align:left; background-color:lightgray; font-weight:bold; vertical-align: top;} 
 ';
            style += ' .firstCol {max-width:80px; vertical-align:top; min-width: 30px;padding:2px; padding-right:3px; text-align:right}
  ';
            style += ' .dataCol1 {max-width:200px;vertical-align:top; min-width: 150px;padding:2px;}
  ';
            style += ' .dataCol2 {max-width:150px;vertical-align:top; min-width: 80px; text-align:right;padding:2px;} 
 ';
            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;'>A© Dummy Info.</span>");
            printWindow.document.write("</td>");
            printWindow.document.write("</tr>");

            printWindow.document.write("</table> ");
        }

    </script>
</head>
</html>
02JavaScript, JQuery, HTML, CSS,
Похожие вопросы