如何将页眉和页脚添加到我从 Mobile Safari 打印的 html 内容的每一页？

Question

我的任务是打印 html 作为报告。我需要为报告中的每一页添加页眉和页脚。

我一直在使用此处介绍的技术：https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a 让这些页眉和页脚出现在 Firefox、Chrome 和 IE 11 中。

不幸的是，当我在 iOS 上打印来自移动 safari 的页面时，我也需要它们出现，但它们没有。

有没有人有将页面 headers/footers 添加到移动 safari 打印输出的每一页的实用技术？该报告的内容（例如表格）将跨越多个页面。

（我不希望在服务器端将报告呈现为 PDF）

Answer 1

我认为您可以使用 npm -i html-pdf，它具有页眉和页脚的配置。

检查是否有帮助。

Answer 2

这是我试过的 HTML 代码，您可以定义您的自定义页眉和页脚文本，它将出现在所有页面上（如果此 HTML 页面有多个页面），我也已将其隐藏在浏览器中，但在打印时可见。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        @media screen {
            .noPrint {
            }

            .noScreen {
                display: none;
            }
        }

        @media print {
            .noPrint {
                display: none;
            }

            .noScreen {
            }
        }
        #header {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
        }

        #footer {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            right: 0;
        }
        body {
            font: 12pt Georgia, "Times New Roman", Times, serif;
            line-height: 1.3;
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <div id="header" class="noScreen">
        <h2>Header Content</h2>
    </div>
    <div id="footer" class="noScreen">
        <h2>Footer Content</h2>
    </div>
    <!--Multiple page of contents--> 
</body>
</html>

好了...希望这对您有所帮助...

编码愉快...

Answer 3

WebKit 中存在一个错误，导致它目前在 Safari 中不实用。这是此问题的link。

https://bugs.webkit.org/show_bug.cgi?id=17205

如何将页眉和页脚添加到我从 Mobile Safari 打印的 html 内容的每一页？

How can I add headers and footers to every page of html content I'm printing from Mobile Safari?

css

mobile-safari

css-print