Search code examples
cssmobile-safaricss-print

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

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)

Solution

  • 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