Кто-нибудь имеет ссылку на статью или рабочий пример повторения заголовков/нижних колонтитулов страниц из Chrome?
Фон:
Я потратил несколько дней на это без везения, есть несколько предложенных Stack решений, но ни один из них не работает (в Chrome). Поскольку мы используем Chrome на работе, я только тестировал его, поэтому многие из них ниже говорят, что Chrome просто не может этого сделать, но, возможно, я что-то упустил?
Я пробовал эти ссылки Stack (..и еще много):
Печать нижнего колонтитула на каждой печатной странице с веб-сайта во всех браузерах (Chrome)
Есть ли способ получить заголовок/нижний колонтитул веб-страницы на каждой странице?
Как использовать HTML для печати верхнего и нижнего колонтитула на каждой печатной странице документа?
Создание верхних и нижних колонтитулов страниц с использованием CSS для печати
Если я не могу, используйте повторяющиеся верхние/нижние колонтитулы... тогда моя следующая идея - подсчитать мои строки в моем объекте клона и разбить его на максимальное число, создать новую страницу (принудительная высота) и запустить петля снова на другой странице в другом div.
Я действительно ценю любые предложения по запуску решения header/footer, поскольку в целом для моего приложения было готовое печатное предложение.
Ответ 1
Хорошо, никто не принимает этого, так что еще несколько дней оглядываясь и выбирая не писать собственное решение, вот что я нашел.
В самом низу Stack post без голосов и комментариев не было этой одинокой маленькой ссылки: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
Эта вещь потрясающая, она предназначена для обработки широких страниц контента и форматирования их в виде столбцов, таких как газета. Особенно хорошо обрабатывает разрывы страниц и довольно гибкий.
В моем случае мне понадобился один столбец (ширина страницы) и повторение верхних и нижних колонтитулов. Я использовал пример 10 в качестве базы: http://welcome.totheinter.net/autocolumn/sample10.html
Я просто добавил ссылку на подключаемый модуль, изменил необходимые идентификаторы и классы в соответствии с моей страницей и внес некоторые незначительные изменения CSS в высоты и ширину, и я смог распечатать многостраничный контент с повторением верхних и нижних колонтитулов в Гугл Хром! (моя компания предпочитала браузер)
TIPS:
-
Один маленький трюк CSS, я сделал контент div MIN-HEIGHT установленным так, чтобы он
нажал нижний колонтитул на короткие страницы. (Не делайте этого, если вы хотите, чтобы у пользователя была опция портретной или альбомной ориентации). Мой окончательный отпечаток исправлен, так что это было здорово для меня.
-
Я тестировал разные высоты контента, чтобы увидеть, как он разбивает контент, он был гладким каждый раз.
Я попытался опубликовать свой последний пример в JsBin и Fiddle, но каждый раз он запускал ошибку.
Итак, пример 10 выше - отличное место для начала, как показано до и после.
Вот мой финал с переменным высотным содержимым и повторяющий верхние и нижние колонтитулы:
(это представление, когда я нажимаю кнопку "Печать/кнопка браузера браузера" в Chrome)
![enter image description here]()
ОБНОВЛЕНИЕ 7/2014: Еще раз Chrome - это проблема моего существования с проблемами печати. Я увидел комментарий ниже о ссылке, которую я предоставил. Он прав, он правильно отображается, но вид печати неверен. Извините, но это хороший пример, чтобы изучить настройки.
Я все еще использую это решение, оно работает, но вам нужно настроить CSS и JS var для размера содержимого тела. Комбинации калибровки являются ОЧЕНЬ чувствительными, но когда вы получите правую и вертикальную ширину страницы, она работает. Я должен был написать отдельные функции для форматов бумаги Legal/Letter. Он ограничен, но работает для наших целей.
Я также заметил, что в зависимости от моего размера окна это не всегда выглядело правильно, но окончательный продукт PRINTED был как и ожидалось с повторением верхних и нижних колонтитулов, поэтому я использовал окно, которое сразу распечатывалось, чтобы пользователь не обратите внимание на результат, а скорее увидит рендеринг хромовой печати. Я ненавижу эти способы обхода, но со всеми в моем офисе с помощью Chrome это необходимое зло.
Ответ 2
Это может быть не прямой ответ на ваш вопрос, а, возможно, прямое решение вашей проблемы.
После сжигания дней и недель о том, как решить эту проблему, я, наконец, отказался от использования прямой печати html/css при повторении заголовков/нижних колонтитулов. Я видел много кодов и образцов, но каждый из них не отвечает тем, что в точности соответствует моим потребностям, всегда отсутствует или не печатается корректно.
Решение, приемлемое для моей, представляет собой комбинацию простого html, простого css и преобразования этого в pdf. Вы будете удивлены, как просто структура html и css.
Это решение не совсем мое, а комбинация вышеперечисленных кодов и библиотека wkhtmltopdf. Пожалуйста, не волнуйтесь, это очень просто установить, вот что я точно использовал Windows (MSVC 2013) версии 0.12.2.1, у меня есть Windows 7 64bit с xampp как мой стек. Вы можете следовать этому руководству о том, как Установить wkhtmltopdf
После установки вы сможете создать этот код
<?php
// Test correct and failed output
// shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt');
shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --orientation Landscape C:\xampp\htdocs\test\Template.html google.pdf');
?>
<html>
<head>
</head>
<body>
<p>Magical ponies!</p>
</body>
</html>
Ответ 3
Ответ на этот вопрос зависит от структуры вашего документа. Если его можно структурировать как серию коротких, нерушимых разделов, то вам повезло! Существует совместимый с Chrome способ имитации заголовков страниц в этом типе документа (фактически, он работает во всех популярных настольных браузерах).
Основная идея состоит в том, чтобы поместить копию заголовка в верхней части каждого нерушимого раздела, а затем использовать отрицательное поле, чтобы скрыть копию, чтобы она была видна только в том случае, если разрыв страницы ударяет раздел на следующую страницу, Тем не менее, это немного упрощает, поэтому я бы рекомендовал изучить код ниже, прежде чем попробовать это на своих собственных документах.
Test doc:
<!DOCTYPE html>
<html>
<head>
<style>
.section {
display: table;
width: 100%;
}
.section > div {
display: table-cell;
overflow: hidden;
}
.section ~ .section > div:before {
content: "";
display: block;
margin-bottom: -2.5em; /* inverse of header height */
}
.section > div > div {
page-break-inside: avoid;
display: inline-block;
width: 100%;
vertical-align: top;
}
.header {
height: 2.5em; /* header must have a fixed height */
}
.content { /* this rule set just adds space between sections and is not required */
margin-bottom: 1.25em;
}
</style>
</head>
<body>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
</body>
</html>
Вы не хотели бы использовать эту технику в документах с блоками текста размером более 1/3 страницы, но отлично подходят для документов, которые состоят из небольших дискретных разделов, таких как формы и таблицы.
Мой ответ на этот другой пост также может представлять интерес. Он показывает, как создавать совместимые с Chrome повторяющиеся заголовки таблиц, используя те же основные принципы, но вся дополнительная разметка добавляется через javascript, чтобы он не "загрязнял" исходный HTML-документ.
Ответ 4
К сожалению, это известная ошибка веб-кита (Chrome и Safari) - см. здесь. Я пытался найти обходное решение много раз, но не повезло.
Пример, связанный с принятым ответом , кажется, не работает, когда вы печатаете из браузера.
Ответ 5
Для всех, кто по-прежнему сталкивается с этой проблемой, я только что создал проект с открытым исходным кодом, который позволяет печатать верхние и нижние колонтитулы в Chrome (и он должен работать и в других браузерах. См. этот ответ:
fooobar.com/info/18579/...
