Я хочу поставить верхний и нижний колонтитулы на каждой странице в режиме печати. Я много исследовал об этом.Пользовательский верхний и нижний колонтитулы на html странице
Я нашел два решения. Но они не являются кросс-браузерами (я хочу, чтобы он работал в IE, Firefox и Chrome)
Первое решение: я устанавливаю поля сверху и снизу в таблицу содержимого. Затем я пишу верхний и нижний колонтитулы в это пространство с фиксированным положением. Он отлично работает в Firefox. Но в IE и Chrome он не устанавливает поля. Также в Chrome он не записывает верхний и нижний колонтитулы на каждую страницу.
Вот мой код:
pagination.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
pagination.css
@media screen{
.header{
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
}
.footer{
width:768px;
height:100px;
border:2px solid #000;
}
}
@media print {
.header{
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
}
.footer{
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
}
@page{
margin-bottom:150px;
}
}
И это второе решение:
В этом решении им с помощью table-header-group
и table-footer-group
атрибутов. Он работает с Firefox и IE. Но Chrome не понимает снова. Он не повторяет верхний и нижний колонтитулы на каждой странице в режиме печати.
Вот еще один код: Is there a way to get a web page header/footer printed on every page?
<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
Есть ли хак, чтобы решить эти проблемы браузера или у вас есть какие-либо предложения для меня?
Нет. Вы либо скомпилируете PDF-файл, либо передаете его менеджеру печати, либо работаете с поведением по умолчанию. – MetalFrog
Я также создаю pdf, но он очень медленный. Итак, я хочу сделать это с помощью html –
Использование '' и '
' не работает в Chrome? –ответ
Попробуйте создать свою страницу в теге div, а не в любом теге таблицы! div более легкий вес, чем таблица
Thank you!
источник
2012-01-21 17:09:24 Chintan
Я не консультируюсь с позицией! попробуйте использовать абсолютное, если возможно :) – Chintan
вы didnt понять мой вопрос. Я хочу сделать это в режиме печати для каждой страницы –
На мой взгляд, этот сайт, который имеет ееп API и множество опций, таких как пользовательские колонтитулы работает отлично подходит для печати:
http://pdfmyurl.com
В моем случае скорость отличная, и это ничего не меняет в макете.
Решение (много работы): Используйте абсолютное позиционирование для всех элементов.
источник
2014-07-20 05:44:54 tkon99
Смежные вопросы