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

Question

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

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

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

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

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

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

3

css mobile-safari css-print

Источник

user675682 22 фев '19 в 01:46

1 ответ

Другие вопросы по тегам css mobile-safari css-print

user3044152 04 мар '19 в 16:21 2019-03-04 16:21 · Answer 1 · 2019-03-04 16:21

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

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

3

Источник

user3044152 04 мар '19 в 16:21

user4374291 01 мар '19 в 11:33 2019-03-01 11:33 · Answer 2 · 2019-03-01 11:33

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

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

0

Источник

user4374291 01 мар '19 в 11:33

user4269733 04 мар '19 в 11:26 2019-03-04 11:26 · Answer 3 · 2019-03-04 11:26

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

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

Удачного кодирования...