Выполняя очередную рабочую ситуацию, сталкиваешься с проблемой, когда разрабатываешь или дорабатываешь CRM. На этот раз задача стояла в проставлении номера страницы.
Вариант нашелся сразу на стаке, но его отказывался понимать хром и все браузеры работающие на его движке. Даже ради такого обновил Яндекс браузер и Google Chrome, они просто проставляли на всех страницах единицы. Т.е. счет не велся. Но этот же пример работал в мозилле и в ишаке.
Пример, взятый из сети:
CSS:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}HTML:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>Также не работала такая конструкция:
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}Т.е. варианты выше подразумевают автоматическую подстановку при увелечении числа страниц на печать.
Если хром это не понимает и нужно вывести номера страниц, приходится вручную проставлять эти номера. А точнее вставлять div'ы для номеров, это дело можно сделать автоматически, но в моем случае этого не требовалось документы от силы страниц 10 были.
В итоге я создал стиль для одной страницы и в последующем его применял просто к новой, удобство заключается в том что на экране видишь, то и будет распечатано (отступы, межстрочный, номера страниц).
Раньше когда пользовался лисой на этом как-то не заморачивался. Но так как печать будет не с лисы и скорее всего без всякого обновления за последний год, то остановился на этом варианте. В целом он выглядит так:
Добавил форматы страниц А3, А5
@page {
margin:0.5cm;
}
body {
height: 100%;
margin: 0px;
background: rgb(204,204,204);
counter-reset: pagenumber;
}
.page {
margin: 0 auto;
padding: 0px;
background: white;
display: block;
position: relative;
overflow: hidden;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
page-break-after: always;
}
.page .content {
margin-top: 2cm;
margin-left: 2cm;
margin-right: 2cm;
position: relative;
height: 100%;
text-indent: 1.25cm;
font-size: 14px;
line-height: 1.5;
font-family:times new roman,times,serif;
text-align: justify;
overflow: hidden;
}
.page .content p {
margin: 0em;
}
.page .page-footer {
position: absolute;
bottom: 0.5cm;
left: 50%;
right: 50%;
}
.page .page-footer:after {
counter-increment: pagenumber;
content: counter(pagenumber);
}
@media print {
body, .page {
margin: 0;
box-shadow: 0;
}
}
.page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
.page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
.page[size="A3"][layout="portrait"] {
width: 42cm;
height: 29.7cm;
}
.page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
.page[size="A5"][layout="portrait"] {
width: 21cm;
height: 14.8cm;
}Как пользоваться: допустим нужны 2 страницы А4 в книжной ориентации:
<div class="page" size="A4">
<div class="content">
<p>Содержимое 1 страницы</p>
</div>
<div class="page-footer"></div>
</div>
<div class="page" size="A4">
<div class="content">
<p>Содержимое 2 страницы</p>
</div>
<div class="page-footer"></div>
</div>
На этом все. А нет, так как делал для CRM: Клиентская база, то пожалуй расскажу как это туда засунуть для тех кто испытывает трудности:
Первое, заходим в нужную таблицу далее жмем Шаблоны печати - Добавить шаблон. Вписываете имя шаблона, формат шаблона - html, в заголовок шаблона вставляете следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Страница на печать</title>
<meta charset="utf8">
<style type="text/css">
@page {
margin:0.5cm;
}
body {
height: 100%;
margin: 0px;
background: rgb(204,204,204);
counter-reset: pagenumber;
}
.page {
margin: 0 auto;
padding: 0px;
background: white;
display: block;
position: relative;
overflow: hidden;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
page-break-after: always;
}
.page .content {
margin-top: 2cm;
margin-left: 2cm;
margin-right: 2cm;
position: relative;
height: 100%;
text-indent: 1.25cm;
font-size: 14px;
line-height: 1.5;
font-family:times new roman,times,serif;
text-align: justify;
overflow: hidden;
}
.page .content p {
margin: 0em;
}
.page .page-footer {
position: absolute;
bottom: 0.5cm;
left: 50%;
right: 50%;
}
.page .page-footer:after {
counter-increment: pagenumber;
content: counter(pagenumber);
}
@media print {
body, .page {
margin: 0;
box-shadow: 0;
}
}
.page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
.page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
.page[size="A3"][layout="portrait"] {
width: 42cm;
height: 29.7cm;
}
.page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
.page[size="A5"][layout="portrait"] {
width: 21cm;
height: 14.8cm;
}
.content table{
text-indent: 0cm;
}
</style>
</head>
<body>
В тело шаблона вписываете ваш текст, например мой:
<div class="page" size="A4">
<div class="content">
<p>Содержимое 1 страницы</p>
</div>
<div class="page-footer"></div>
</div>
<div class="page" size="A4">
<div class="content">
<p>Содержимое 2 страницы</p>
</div>
<div class="page-footer"></div>
</div>
В Подвал шаблона вставляем логическое завершение всей конструкции :)
<script src="/assets/components/tickets/js/web/editor/jquery.markitup.js"></script>
<script src="/assets/components/tickets/js/web/default.js"></script>
</body>
</html>Кстати, не забываем про Права доступа, ибо если вы разграничили и сделали группы, без наследования, то Вам в ручную нужно их вновь проставлять. Ибо забудете, что в 90% случаях.
