Как использовать HTML для печати верхнего и нижнего колонтитула на каждой напечатанной странице документа?
if (is_array($_POST) && array_key_exists('fromPerson', $_POST)) {
echo 'blah' . $_POST['fromPerson'];
}
3 ответа
Попробуйте это, для меня это работает над Chrome, Firefox и Safari. Вы исправите заголовок и нижний колонтитул к каждой странице, не перекрывая содержание страницы
HTML
CSS <body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Pagina " counter(page);
}
</style>
Я удивлен и невпечатленный, что Chrome имеет такую ужасную поддержку печати CSS.
Моя задача потребовала показа немного отличающегося нижнего колонтитула на каждой странице. В самом простом случае, просто глава постепенного увеличения и номер страницы. В более сложных случаях, большем количестве текста в нижнем колонтитуле - например, несколько сносок - который мог развернуть его в размере, вызвав то, что находится на предметной области той страницы, которая будет уменьшена и часть его к обратному течению к следующей странице.
печать CSS не может решить это, по крайней мере, не с дрянной поддержкой браузера сегодня. Но ступая за пределами печати, CSS3 может сделать большой тяжелый подъем:
https://jsfiddle.net/b9chris/moctxd2a/29 /
<div class=page>
<header></header>
<div class=content>Content</div>
<footer></footer>
</div>
SCSS:
body {
@media screen {
width: 7.5in;
margin: 0 auto;
}
}
div.page {
display: flex;
height: 10in;
flex-flow: column nowrap;
justify-content: space-between;
align-content: stretch;
}
div.content {
flex-grow: 1;
}
@media print {
@page {
size: letter; // US 8.5in x 11in
margin: .5in;
}
footer {
page-break-after: always;
}
}
существует немного больше кода в примере, включая некоторую Cat Ipsum; но js используемое должно просто там продемонстрировать, насколько заголовок/нижний колонтитул может варьироваться, не повреждая разбиение на страницы. Ключ действительно должен взять прием column-bottom-sticking из CSS Flexbox и затем применить его к странице известной, зафиксированной высоты - в этом случае, 8,5 "x11" листков американской бумаги размера буквы, с.5" полями, уехав width: 7.5in и height: 10in точно. Как только контейнеру гибкого провода CSS говорят его точные размеры (div.page), легко заставить заголовок и нижний колонтитул разворачивать и сокращать способ, которым они делают в стандартной типографии.
то, Что оставляют, течет содержание страницы, когда нижний колонтитул, например, растет до 8 сносок не 3. В моем случае содержание фиксируется достаточно, что я не должен волноваться об этом, но я уверен, что существует способ сделать это. Один подход, который прыгает к уму, должен превратить заголовок и нижний колонтитул в плавания 100% шириной, затем расположить их с JavaScript. Браузер обработает прерывания к регулярному, довольному поток для Вас автоматически.
Это то, что вы хотите только для печати? Вы можете добавить его на каждую страницу своего сайта и использовать CSS для определения тега как носителя только для печати.
В качестве примера это может быть пример заголовка:
<span class="printspan">UNCLASSIFIED</span>
А в CSS сделайте что-то вроде этого :
<style type="text/css" media="screen">
.printspan
{
display: none;
}
</style>
<style type="text/css" media="print">
.printspan
{
display: inline;
font-family: Arial, sans-serif;
font-size: 16 pt;
color: red;
}
</style>
Наконец, чтобы включить верхний / нижний колонтитул на каждую страницу, вы можете использовать включения на стороне сервера или, если у вас есть страницы, созданные с помощью PHP или ASP, вы можете просто закодировать их в общий файл.
Изменить:
Этот ответ предназначен для того, чтобы предоставить способ показать что-либо на физической печатной версии документа, не показывая это иначе. Однако, как следует из комментариев, это не решает проблему наличия нижнего колонтитула на нескольких напечатанных страницах при переполнении содержимого.
Я оставляю его здесь на случай, если он все же окажется полезным.