3

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

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

不幸的是，当我从 iOS 上的移动 Safari 打印页面时，我也需要它们出现，但它们不需要。

有没有人有一种工作技术可以将页眉/页脚添加到移动 safari 打印输出的每一页？该报告的内容（例如表格）将跨越多个页面。

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

4

3 回答 3

3

WebKit 中有一个错误，这使得它目前在 Safari 中不切实际。这是此问题的链接。

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

于 2019-03-04T16:21:06.537 回答
0

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

检查它是否有帮助。

于 2019-03-01T11:33:43.200 回答
0

这是我尝试过的 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>

你去...希望这有帮助...

快乐的编码...

于 2019-03-04T11:26:51.983 回答