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

Question

I'm tasked with printing html out as a report. I need to add headers and footers to every page in the report.

I've been using the technique explained here: https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a to get these headers and footers to appear in Firefox, Chrome, and IE 11.

Unfortunately, I need them to appear when I print the pages from mobile safari on iOS too, and they do not.

Does anyone have a working technique to add page headers/footers to every page of a printout from mobile safari? The report has content (tables, for example) that will span multiple pages.

(I do not wish to render the report into a PDF on the server side)

You can try Bootstrap or bulma css library probably... https://getbootstrap.com, https://bulma.io/documentation — Yevhenii Shashkov, Mar 04 '19 at 13:18

score 3 · Accepted Answer · answered Mar 04 '19 at 16:21

3

There is a bug in WebKit, that makes it currently impractical in Safari. Here is the link to this issue.

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

answered Mar 04 '19 at 16:21

Bradia

827
5
8

score 0 · Answer 2 · answered Mar 01 '19 at 11:33

0

I think you could use npm -i html-pdf, which has configurations for headers and footers.

Check if it helps.

answered Mar 01 '19 at 11:33

T04435

12,507
5
54
54

I need to be able to load and print the document with a single click. This is easy to do when printing HTML, but I haven't seen a cross platform solution for PDFs. So this question specifies that I'm looking for a pure HTML solution. If there isn't one, then I'm fine with that. – Karen Zilles Mar 01 '19 at 21:06

score 0 · Answer 3 · answered Mar 04 '19 at 11:26

Here is the HTML code i tried, you can define your custom header & footer text and that will appear on all the pages (If this HTML page has multiple pages), also i have made it hidden on browser but will be visible while printing.

<!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>

There you go...hope this helps...

Happy coding...

This is similar to the technique that I used in the question, but doesn't work when printing from mobile Safari. — Karen Zilles, Mar 04 '19 at 18:16

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

3 Answers3