Предсказуемая и последовательная кроссбраузерная печать из HTML

Question

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

Традиционно мы использовали печатные СМИ запросов, но это было почти невозможно добиться согласованных результатов в различных браузерах, скажем, Firefox, Chrome и Safari Mobile и т.д. Кусочки выльются, разрывы страниц будут игнорироваться и т.д.

Некоторые компании, такие как Amazon и Newegg, предоставляют клиентам возможность распечатывать счета-фактуры и другие страницы. Кажется, что обычно это включает в себя отдельную версию содержимого только для печати, либо все таблицы, либо очень упрощенную разметку, которая выглядит чрезвычайно простой при распечатке. Как правило, нет никакого стиля, немного, если какие-либо изображения, определенно нет, и ни одна страница не разбивается, насколько я могу судить.

Другой вариант - просто преобразовать все в PDF, но у этого есть свои собственные подводные камни и расходы. Теперь вам нужно повторно создать один и тот же контент во втором формате для каждой страницы, которая должна быть напечатана, а также отличная стилизация PDF также нетривиальна.

Есть ли что-нибудь, что может помочь? Любые общепринятые решения?

Answer 1

Мы используем wkhtmltopdf и PrinceXML, чтобы получить последовательный стиль. Оба являются инструментами командной строки, которые могут принимать URL-адрес плюс пользовательский файл CSS. Они генерируют согласованный вывод и независимы от браузера, поскольку они являются механизмом рендеринга.

Мы использовали wkhtmltopdf, но мы переходим к PrinceXML, потому что он поддерживает поля margin и двухколоночную раскладку. (Основная оговорка с PrinceXML - это цена.)

Идеально стильный PDF не кажется хуже или сложнее, чем стиль для веб-дисплея. Мой опыт в том, что для правильной печати страницы печати требуется час или два. Я никогда не пытался обрабатывать Google Chart.

Answer 2

Все популярных настольных браузеров теперь поддерживает CSS @page rule для настройки полой страницы, а также свойства CSS page-break-inside, page-break-before и page-break-after для обработки разрывов страниц. Они, как правило, обеспечивают достаточный контроль для обеспечения согласованной межплатформенной печати, но есть несколько вещей, которые могут сделать только один или два браузера. Вот некоторые примеры:

• нумерация страницы
• бегущих страницы и колонтитулов управления
• сироты/вдова
• контроля цвета фона

Если вам нужны какие-либо из этих вещей, PDF может быть вашим лучшим вариантом; иначе это может быть излишним. Конвертер PDF не будет автоматически определять идеальный способ разбиения на страницы любого контента, который вы бросаете на него; человеческое суждение по-прежнему будет необходимо.

Это не означает, что вам нужно явно объявить местоположение каждого разрыва страницы. Обычно намного легче предотвратить плохую разбивку на страницы, чем принудительное разбиение на страницы. Другими словами, вместо того, чтобы сообщать браузеру, где вы do хотите разрывы страницы, скажите, где вы не хотите их.

Примеры мест, где вы можете предотвратить разрывы страниц:

• между заголовком раздела и в первой строке раздела текста
• между заголовками столбцов за столом и первой строки данных *
• между тесно связанными полями формы.

В этом случае декларация перехода к CSS в этом случае равна page-break-inside: avoid; **. В первых двух примерах было бы проще использовать page-break-after: avoid;, но Firefox поддерживает только значения always и auto для этого свойства. Поэтому вместо этого вам нужно создать нерушимый div, который содержит или перекрывает материал, который вы хотите сохранить вместе. Вот один из способов сделать это:

<style> 
    .section { 
    line-height: 1.25em; 
    } 
    .title { 
    page-break-inside: avoid; 
    padding-bottom: 1.25em; 
    font-weight: bold; 
    } 
    .overlap { 
    margin-bottom: -1.25em; 
    } 
</style> 

<div class="section"> 
    <div class="title"> 
    Title of This Section 
    </div> 
    <div class="overlap"> 
    </div> 
    This is the section text. It could be any length, so we have to 
    allow page breaks in it. However, we don't want the first line to 
    be separated from the section title. The title is unbreakable, so 
    we just need to add some bottom padding to it and make it overlap 
    the first line of text. 
</div> 

* Таблицы, вероятно, самой сложной вещью для печати последовательно во всех браузерах, но it is possible.

** Старые версии Firefox, Chrome и Safari не поддерживают объявление CSS page-break-inside: avoid;, но вы можете добиться такого же эффекта с помощью display: inline-block;, если это необходимо.