Как добавить верхние и нижние колонтитулы на каждую страницу HTML-содержимого, которое я печатаю из Mobile Safari? - PullRequest
Новая
       11

Как добавить верхние и нижние колонтитулы на каждую страницу HTML-содержимого, которое я печатаю из Mobile Safari?

0 голосов
/ 22 февраля 2019

Мне поручено распечатать html как отчет.Мне нужно добавить верхние и нижние колонтитулы на каждую страницу отчета.

Я использовал описанную здесь технику: https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a, чтобы эти верхние и нижние колонтитулы отображались в Firefox, Chrome иIE 11.

К сожалению, мне нужно, чтобы они появлялись, когда я печатаю страницы из мобильного сафари на iOS, а они нет.

Есть ли у кого-нибудь методика добавления заголовков страниц /нижние колонтитулы на каждой странице распечатки из мобильного сафари?Содержимое отчета (например, таблицы) будет занимать несколько страниц.

(я не хочу выводить отчет в PDF на стороне сервера)

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

Вот 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>

Вот, пожалуйста ... надеюсь, это поможет ...

Удачное кодирование ...

0 голосов
/ 04 марта 2019

В WebKit есть ошибка, которая делает его в настоящее время нецелесообразным в Safari.Вот ссылка на эту проблему.

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

0 голосов
/ 01 марта 2019

Я думаю, вы могли бы использовать npm -i html-pdf, который имеет конфигурации для верхних и нижних колонтитулов.

Проверьте, помогает ли это.

...