Печать повторяющихся заголовков страниц в Chrome

Кто-нибудь имеет ссылку на статью или рабочий пример повторения заголовков/нижних колонтитулов страниц из 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)

ОБНОВЛЕНИЕ 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/...