Печать нижнего колонтитула на каждой печатной странице с веб-сайта, во всех браузерах (Chrome)

Дорогой, я пробовал позицию CSS: Исправлено свойство, но оно действительно работает на Firefox и IE (взломать для IE6), но оно совсем не работает для Chrome. Я думал, что Chrome будет последним, он будет очень легко поддерживать его, но все равно это не так. Я пробовал <thead> , <tfoot> <tbody> снова работает в IE и Firefox, но проблематично в Chrome. Пожалуйста, у кого-то есть альтернативное решение.

ОТВЕТЫ

Ответ 1

Это код, который я использую. Примечание. Я устанавливаю как html, так и высоту тела на 100%.

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}

Ответ 2

Кажется, что Chrome [webkit] имеет другой способ обработки позиции: исправлен в стилях стилей печати, чем остальные браузеры.

Итак, текущий ответ на этот вопрос:
В Chrome нет подходящего решения.

В то время как FF и IE отображают его на каждой странице, Opera не отображает ее вообще, а браузеры webkit показывают ее только на первой странице.

небольшой тестовый файл:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    	<meta charset="UTF-8">
    	<title>print css test by mtness</title>
    	<style type="text/css">
    	@media print {
    		#watermark { 
    			display: block;
    			position: fixed;
    			top: 0;
    			right: 0;
    			z-index: 5;
    		}
    
    		p { 
    			position: relative;
    			top: 40pt;
    			display: block;
    			page-break-after: always;
    			z-index: 0;
    		}
    	}
    	</style>
    </head>
    <body>
    	<div id="watermark">AWESOME!</div>
    	<p>page1</p>
    	<p>page2</p>
    	<p>page3</p>
    </body>
    </html>

Ответ 3

Изменить: Очевидно, ошибка исправлена, поэтому библиотека, которую я разделяю ниже, может быть не очень полезной.

Из всех моих исследований правильно, что нет возможности получить позицию: исправлено для работы в Chrome. Вот ссылка на ошибка на странице проекта Chromium.

Тем временем я создал проект с открытым исходным кодом, который позволяет печатать верхние и нижние колонтитулы в Chrome. Он находится в начале разработки, но он работает, в зависимости от структуры вашего html-макета:

https://github.com/byuarchdi/print-headers-and-footers

Это незавершенное производство, и он в значительной степени опирается на CSS-регионы Polyfill. Но я использую методы в этой библиотеке, чтобы очень хорошо воздействовать на проект на работе.

Ответ 4

Я сделал это, используя таблицы, но только для заголовков в хром. Я поместил повторяющийся контент в тег adad и содержимое страницы в tbody, поэтому браузер правильно интерпретировал.

Однако я столкнулся с ошибкой в ​​большом содержимом HTML. В некоторых случаях содержимое перекрывало заголовок. В то время, когда я отправляю это, до сих пор не найдено решение.

При печати таблиц в Google Chrome содержимое перекрывает заголовок