Разрыв html страницы при печати: The OpenNET Project: HTML

Leave a Comment / Html / By /

Содержание

установите 2 разрыва страницы на html печать



Я хочу добавить пустую страницу на печать html страниц. Я использую этот класс:

.page{
   PAGE-BREAK-AFTER: always;       
}

Когда страница печатается, она разрывается. Дело в том, что я хочу добавить еще один разрыв страницы после этого.

Я пытался с:

.page{
   page-break-after: always;       
   page-break-before: always; 
}

Но установлен только один. Как я могу установить 2 или много разрывов страниц? Или как я мог это сделать, чтобы добавить пустую страницу?

html css page-break
Поделиться Источник jonal     21 марта 2016 в 16:17

2 ответа

  • Использование Javascript для добавления разрыва страницы в некоторых случаях

    Я работаю над печатной формой в HTML, которая предназначена для извлечения данных из приложения базы данных и отображения их в виде страницы, настроенной для печати. У меня есть несколько таблиц, настроенных для извлечения различных данных из базы данных и отображения их в печатном формате….

  • Как добиться разрыва страницы в таблице HTML для Google Chrome?

    Я пытаюсь напечатать большую таблицу, сгенерированную с помощью jQuery на странице HTML. Я использую Chrome 26.0.141. Проблема заключается в разрыве страницы. я изначально использовал это css #membersList table { page-break-inside:auto; position:relative} #membersList tr { page-break-before:avoid;…


1

Попробуйте сделать это:

<div></div>
<div>
    <!-- page content here -->
</div>

И CSS:

.page-before {
    page-break-before: always;
}
.page {
    page-break-after: always;
}

И пока

page-before div всегда пуст, он не должен быть виден или негативно влиять на макет.

Поделиться Potassium Ion     21 марта 2016 в 16:29


0

Наконец мне пришлось ввести какой-то текст в div просто для того, чтобы IE не игнорировал перерыв после этого. В конце концов все становится именно так:

.page {
   page-break-after: always;
}

и html:

<div>
  <!-- page content here -->
</div>
<div>
  ·
</div>

Поделиться jonal     22 марта 2016 в 19:56

Похожие вопросы:


Проблема разрыва страницы отчета SSRS

У меня проблема с разрывами страниц в отчете SSRS, и я ни в коем случае не эксперт. Это находится в отметке XML, чтобы обеспечить разрыв страницы: <TableGroups> <TableGroup> <Grouping…


LogiXML студии — доклад логи силу разрыва страницы

Я не уверен, насколько широка аудитория пользователей Logi Report, которые наблюдают за сайтом, но вот моя дилемма. Я новый, чтобы найти способ, чтобы вставить разрыв страницы после того, как группа…


Повторяющийся заголовок таблицы после разрыва страницы

При печати таблицы HTML вы можете использовать CSS, чтобы заставить строку заголовка таблицы снова отображаться после разрыва страницы. Этот стиль: @media print { thead { display:…


Использование Javascript для добавления разрыва страницы в некоторых случаях

Я работаю над печатной формой в HTML, которая предназначена для извлечения данных из приложения базы данных и отображения их в виде страницы, настроенной для печати. У меня есть несколько таблиц,…


Как добиться разрыва страницы в таблице HTML для Google Chrome?

Я пытаюсь напечатать большую таблицу, сгенерированную с помощью jQuery на странице HTML. Я использую Chrome 26.0.141. Проблема заключается в разрыве страницы. я изначально использовал это css…


Печать страницы из шаблона HTML

У меня есть страница HTML, которая отображает сводку данных вверху и сетку внизу. У меня есть кнопка вверху, которая должна печатать информацию на странице в определенном формате. Чтобы…


Html таблица разрыва страницы с рамкой (печать)

Мне нужно использовать разрыв страницы внутри строк таблицы. Но проблема в том, что когда я использую разрыв страницы после строки(tr), эта строка(tr) рисуется до конца страницы при печати. Любые…


Как игнорировать 2 линии разрыва в HTML и CSS?

Я отлаживаю существующее приложение Java/JSP/Struts, каким-то образом оно генерирует 2 строки разрыва и оставляет большое пространство на странице : <Br></Br> <Br></Br>…


Проблема разрыва страницы в браузерах печать

Вот как выглядит моя страница Html в режиме печати. Мне нужно поместить его на новую страницу, когда он ломается в 2, и для этого нужно вставить ниже div перед этими элементами (то, что я делаю для…


Как избежать разрыва страницы внутри tr?

Как избежать разрыва страницы внутри <tr> ? (ANGULAR PROJECT) у меня есть таблица (PrimeNG table), и я хочу избежать разрыва после печати страницы. Я использую Chromium / Chrome browse. После…

page-break-after | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 7.0+ 1.2+

Internet Explorer и Firefox не поддерживают значения свойства «left» и «right».

Описание

CSS свойство page-break-after определяет наличие или отсутствие разрыва страницы после заданного элемента и используется при печати или для предварительного просмотра печати.

Свойство нельзя использовать с абсолютно позиционированными элементами.

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

Значение по умолчанию: auto
Применяется: к блочным элементам, которые находятся в нормальном потоке элементов
Анимируется: нет
Наследуется: нет
Версия: CSS2
Синтаксис JavaScript: object.style.pageBreakAfter=»always»

Синтаксис

page-break-after: auto|always|avoid|left|right|inherit;

Значения свойства

Значение Описание
auto Вставляет разрыв страницы после элемента при необходимости.
always Всегда делает разрыв страницы после элемента.
avoid Запрещает разрыв страницы после элемента.
left Делает разрыв страницы после элемента таким образом, что следующая(левая) страница будет чистой.
right Делает разрыв страницы после элемента таким образом, что следующая(правая) страница будет чистой.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    @media print { table { page-break-after: always; } }
  </style>
</head>
<body>

  <p>Пример использования свойства page-break-after</p>
  
  <table>
    <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
  </table>

  <p>Этот элемент будет отсутствовать при предварительном просмотре
  печати и распечатан на следующей странице.</p>

</body>
</html>

Результат данного примера в окне браузера:

CSS page-break-after



Пример

Всегда вставляйте разрыв страницы после элемента <Footer>:

@media print {

    footer {page-break-after: always;}
}


Определение и использование

Свойство page-break-after добавляет разрыв страницы после заданного элемента.

Совет: Свойства: pagebb, разбиение на страницы и pagebi помогают определить, как документ должен вести себя при печати.

Примечание: Это свойство нельзя использовать в пустой <div> или на абсолютно позиционированных элементах.

Значение по умолчанию:auto
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS2
Синтаксис JavaScript: object.style.pageBreakAfter=»always»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
page-break-after1.04.01.01.27.0

Примечание: Ни один из браузеров не поддерживает «Избегайте».

Примечание: Браузеры могут интерпретировать «Left» и «Right» как «всегда».

Синтаксис CSS

page-break-after: auto|always|avoid|left|right|initial|inherit;

Значения свойств

ЗначениеОписание
autoПо умолчанию. Автоматический разрыв страницы
alwaysВсегда вставлять разрыв страницы после элемента
avoidИзбегайте разрыва страницы после элемента (если возможно)
leftВставка разрыва страницы после элемента таким образом, чтобы Следующая страница была отформатирована как левая страница
rightВставка разрыва страницы после элемента таким образом, чтобы Следующая страница была отформатирована как правая страница
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

HTML DOM Справочник: pageBreakAfter Свойство


page-break-after | Справочник CSS | schoolsw3.com

Обновляется!!! Справочник JavaScript

Пример

Всегда вставляйте разрыв страницы после элемента <footer>:

@media print {
    footer {page-break-after: always;}
}


Определение и использование

Свойство page-break-after добавляет разрыв страницы после указанного элемента.

Совет: Свойства: page-break-before, page-break-after и page-break-inside помогает определить, как документ должен вести себя при печати.

Примечание: Вы не можете использовать это свойство в пустом <div> или в абсолютно позиционированных элементах.

Значение по умолчанию:auto
Унаследованный:нет
Анимируемый:нет. Прочитать о animatable
Версия:CSS2
JavaScript синтаксис:object.style.pageBreakAfter=»always»

Поддержка браузеров

Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.

Свойство
page-break-after1.04.01.01.27.0

Примечание: Ни один из браузеров не поддерживает «avoid».

Примечание: Браузеры могут интерпретировать «left» и «right» как «always».

CSS Синтаксис

page-break-after: auto|always|avoid|left|right|initial|inherit;

Значения свойств

ЗначениеОписание
autoПо умолчанию. Автоматический разрыв страницы
alwaysВсегда вставляет разрыв страницы после элемента
avoidИзбегайте разрыва страницы после элемента (если это возможно)
leftВставить разрыв страницы после элемента, чтобы следующая страница была отформатирована как левая страница
rightВставить разрыв страницы после элемента, чтобы следующая страница была отформатирована как правая страница
initialУстанавливает это свойство в значение индекса. Прочитать о initial
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Связанные страницы

HTML DOM Справочник: Свойство pageBreakAfter


CSS свойство break-before | назначение, допустимые значения, примеры

Свойство break-before определяет разрыв колонки перед элементом в многоколоночном элементе, а также отвечает за разбивку страниц при печати.

Допустимые значения

  • auto — принудительно разрыв страницы/колонки не делается
  • always — перед элементом ставиться разрыв страницы
  • avoid — избегаем разрыва страницы/колонки перед элементом
  • left — ставиться один или два разрыва страниц, чтобы следующая страница начиналась с левой страницы
  • right — ставиться один или два разрыва страниц, чтобы следующая страница начиналась с правой страницы
  • page — принудительно разрывается страница перед этим элементом
  • column — принудительно разрывается колонка перед этим элементом
  • avoid-page — избегать разрыва страницы перед этим элементом
  • avoid-column — избегать разрыва колонки после этого элемента
Значение по умолчаниюauto
Применимоко всем блочным элементам
Наследованиенет
Версия CSSCSS 3
Поддерживается браузерами

Пример

hr {
break-before: always;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— hr { break-before:page; } —> </style> </head> <body> <p>тест до разрыва страницы</p> <hr /> <p>текст после разрыва страницы (на момент выхода статьи в прямом виде не поддерживается ни одним распространенным браузером)</p> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Multi-column Layout Module — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Хотя это свойство и не поддерживается распространенными браузерами в прямом виде, Safari 3 и выше и Chrome 1 и выше поддерживают похожее свойство -webkit-column-break-before. Оно аналогично свойству page-break-before и имеет одинаковые с ним значения, но относящиеся не к страницам, а к колонкам. Комбинацией двух этих свойств для Safari и Chrome можно добиться такого же эффекта, как и при применении свойства break-before.

Свойство break-inside Свойство break-after

page-break — Русский — it-swarm.com.ru

page-break — Русский — it-swarm.com.ru

it-swarm.com.ru

Wicked_pdf избегать разрыва страницы не работает

Печать CSS: Избегать разрезания пополам DIV между страницами?

Как не разрывать страницу после \ включить в LaTeX

Ручной разрыв страницы в TCPDF

Могу ли я вызвать разрыв страницы при печати HTML?

Вставить разрывы страниц между группами отчетов с помощью двусторонней печати

Вставка разрыва страницы в отчет SSRS

Как применить CSS-разрыв страницы для печати таблицы с большим количеством строк?

разрыв страницы после не работает во flexbox

разрыв страницы после не работает в Chrome

Как разделить основной контент с фиксированным верхним и нижним колонтитулами для нескольких страниц

Как вставить разрыв страницы в HTML, чтобы wkhtmltopdf его анализировал?

Facebook API: Получите поклонников / людей, которым нравится страница

Номер страницы и смещение

Angular 6: возможно многостраничное приложение (MPA)?

Какой лучший способ вырваться из вложенных (для) циклов?

Как вырваться из нескольких циклов в Python?

Как мне выйти из цикла в Perl?

Разница между перерывом и продолжением выписки

Могу ли я использовать break для выхода из нескольких вложенных циклов?

Как вырваться из петли изнутри выключатель?

Как разбить вложенные циклы в JavaScript?

Вырваться из цикла while, содержащего оператор switch

Использование continue в операторе switch

Как вырваться из нескольких циклов одновременно в C #?

Зачем нам нужен перерыв после падежа?

Как мне выйти из цикла в Scala?

Разрыв строки в формате XML?

Разрыв строки в XML?

Почему в C # есть перерыв, если он не является обязательным?

Плохо ли использовать разрыв в цикле for?

разбить и вернуть в Ruby, как вы их используете?

HTML5 canvas ctx.fillText не будет переносить строки?

В Java как break взаимодействует с вложенными циклами?

Что означает число после «перерыва» или «продолжить» в PHP?

Как я могу разорвать внешний цикл с помощью PHP?

R: перерыв для цикла

В JavaScript считается ли возврат из оператора switch лучшей практикой, чем использование break?

Как выйти из функции

Как выйти из двух вложенных циклов?

Выход из цикла FOR в командном файле?

Python: «вырваться» из оператора if внутри цикла for

Переход от одного случая к случаю по умолчанию в операторе switch

Как выйти или выйти из метода в Java?

Как выйти из цикла while в Java?

Разрыв цикла, когда в R появляются «warnings ()»

вырваться из если и foreach

Как вырваться из вложенных циклов?

перерыв; C++: какой цикл он на самом деле ломает

В Go ли оператор break разрывается от switch / select?

Плохо ли использовать выражение «goto»?

Python: Что делает точка с запятой?

Оператор Break внутри двух циклов while

Как убить цикл while нажатием клавиши?

Как вырваться из цикла while в Python?

Выход из цикла for в Java

F # перерыв в цикле

сценарий разрыва / выхода

Это плохая практика использовать break для выхода из цикла в Java?

Относительно операторов переключения Java — использование возврата и пропуска разрывов в каждом случае

Разбить длинное слово с помощью CSS

Как использовать разрыв или продолжение внутри цикла for в шаблоне Twig?

Перерыв управления не работает в 2010 (2013) Excel VBA

Java Как я могу разорвать цикл while под оператором switch?

Есть ли эквивалент в цикле Python for … else в C++?

Должны ли мы разбить регистр по умолчанию в операторе switch?

Swift 2 — Вариант использования для использования оператора break on if?

После обновления до vs2017.3 точки останова не будут достигнуты

Ваше приложение вошло в состояние останова, но нет кода для показа, потому что все потоки выполняли внешний код (обычно системный или структурный код)

Как сломать цикл ForEach в TypeScript

незаконное использование оператора break; Javascript

Вложенный jQuery.each () — продолжить / прервать

удалить все разрывы строк (ввести символы) из строки, используя R

Как прервать цикл while из условия if внутри цикла while?

Выход из итерации для цикла Swift iOS

Удалите заголовок и колонтитул браузера по умолчанию при печати HTML

Как создать якорь и перенаправить на этот конкретный якорь в Ruby on Rails

В чем разница между Page.IsPostBack и Page.IsCallBack?

JavaScript жесткое обновление текущей страницы

Как выполнить Page_Load () в базовом классе страницы?

Facebook: получить список страниц, администратором которых является пользователь

На обратной передаче, как я могу проверить, какой элемент управления вызывает обратную передачу в событии Page_Init

Принудительная прокрутка страницы вверх при обновлении страницы в HTML

Получить название сайта по ссылке

Не могу понять аномалию Белади

Обновить страницу, используя JavaScript или HTML

Facebook Like Widget на фан-странице, область комментариев вне видимой области

C # Очистить сессию

Graph API возвращает «false» или «Unsupported get request», получая доступ к публичной странице Facebook

Жетоны доступа к странице Facebook — срок их действия истекает?

Простой пример публикации на фан-странице Facebook через PHP?

Событие PageIndexChanging, вызванное GridView ‘GridView1’, которое не было обработано

Токен доступа к Facebook для страниц

Получить текущий URL/URI без некоторых переменных $ _GET

ASP.NET: отображение предупреждения из кода C #

Как вставить фид страницы в Facebook на мой сайт

Отключение кнопки отправки после одного клика

Вызванное GridView событие PageIndexChanging, которое не было обработано

Как обнаружить обновление страницы в .net

Как программно обновить браузер

Content dated before 2011-04-08 (UTC) is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 (UTC) is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 (UTC) is licensed under CC BY-SA 4.0. | Privacy

Печать из браузера средствами CSS | CSS | Статьи | Программирование Realcoding.Net

Web наступает. Все больше и больше обычных настольных приложений переезжает в Internet. Уже никого не удивить онлайновым текстовым или графическим редактором. А уж различные многопользовательские комплексы, базы данных, системы отчетности — тут раздолье для веб-технологий.

Например, еще несколько лет назад было бы вполне нормально сделать систему регистрации и учета клиентов скажем стоматологической поликлиники или библиотеки в Delphi, добавить базу данных и сетевую часть. Но сейчас такое решение окажется неразумным: гораздо проще, удобнее, а значит и эффективнее использовать все то, что предоставляет нам Web, даже если приложением будут пользоваться только внутри локальной сети. Кроме того, такое решение кроссплатформенное, что актуально в связи с наметившейся тенденцией перехода к свободным ОС. Все что нужно на клиентских компьютерах — наличие браузера, никаких установок, настроек и прочего.

Но у решения все делать в web есть недостаток (даже не один, но я сейчас не буду перечислять все): неудобство при печати отчетов, бланков документов и прочих печатных страниц. Это связано с тем, что веб-страницы рассчитываются прежде всего для отображения на экране монитора и не подтачиваются для печати, что нередко ведет к расползанию печатной страницы. К счастью это все временные трудности и их можно обойти. Можно, например, генерировать отчеты в pdf или doc. Но я считаю это не слишком удобным: пользователю надо устанавливать программы, работающие с этими форматами, каждый раз выкачивать с сервера сгенерированный файл, печатать из сторонней программы, а не браузера. Поэтому стоит приложить усилия к созданию страниц, правильно выводящихся на печать прямо из браузера.

Раз имеются отдельные версии страницы для отображения на экране и для печати, то следует разделить CSS на две части по назначению. Свойства элементов, специальные для отображения на экране будут храниться в блоке
@media screen {}
а для печати, соответственно, в
@media print {}

Первое, что нужно сделать — отключить все лишние графические элементы: баннеры (в веб-приложении для локальной сети врядли они будут), меню, еще что-нибудь. Достигается это следующей конструкцией в CSS:

@media print {
.banner {display:none;}
}

Также запрещаем отображение других лишних блоков. Возможно, некоторые блоки наоборот стоит отображать при печати, а на экране скрывать. Красивый цветной логотип наверняка на черно-белом принтере распечатается грязным или недостаточно четким, стоит подменить его на специальный контрастный:
@media screen {
div.logo {background: url(img/logo.png) no-repeat top;}
}
@media print {
div.logo {background: url(img/logo_print.png) no-repeat top;}
}

Скорее всего пользователь веб-приложения будет распечатывать страницу на принтере формата A4 (если только это приложение не для полиграфии). Ограничим страницу нужным размером, вставив конструкцию @page. Можно указать размеры страницы (обязательно в сантиметрах или дюймах, ни в коем случае не в пикселах!), так для A4 это 8.5×11 дюймов или 21×29.7 см.
@page {
size 8.5in 11in;
margin: 1cm
}

Если предполагается двухсторонняя печать, то следует различать левую и правую страницы:
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
}

Также размеры всех элементов на странице стоит задавать в относительных единицах. Не помешает подменять шрифт: на бумаге лучше смотрятся шрифты с засечками.

При печати многостраничных отчетов или заполненных бланков документов потребуется каждую часть отчета или каждый бланк выводить на отдельную страницу. Мне показалось очень удобным на экране показать разрыв страницы с помощью горизонтальной черты hr, а при печати по ней делать разрыв страницы:
@media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}

Напомню, что PAGE-BREAK-AFTER заставляет принтер продолжить печать со следующей страницы после вывода элемента с этим свойством, а PAGE-BREAK-BEFORE — перед выводом. В приведенном мной примере hr при печати не отображается (visibility: hidden), но это не мешает ему управлять принтером.

В одном из моих проектов оператору нужно было заполнять форму с данными клиента, после чего ему может понадобиться распечатка этой формы со специальным форматированием. Я решил на одной странице объединить и версию для отображения на экране с полями ввода формы и версию для печати. Это упрощает задачу оператора: достаточно после ввода данных и сохранения нажать кнопку «Распечатать» без загрузки специальной страницы.

Для этого я сформировал форму ввода данных в виде пустого бланка документа. Кстати, это хорошая идея: форма получается компактная и выглядит почти как на бумаге. Далее собираем на одной странице две версии документа, ловко манипулируя свойством display. Каждое поле в HTML выглядит так (упрощенно):

<td>ФИО клиента:</td>
<td><input type=text name=client_name size=30 value="Вася Пупкин"/>
<span class=field>Вася Пупкин</span></td>

Обратите внимание на этот span — в нем дублируется значение поля. CSS-файл такой:

@media screen {
.field {display: none;}
}
@media print {
input {display: none;}
td {border: 1px solid;}
.field {text-decoration: underline;}
}

Таким образом при отображении на экране мы видим поля ввода, а при печати — готовый результат.

Напоследок хочу сказать об одном неприятном моменте. Браузером устанавливаются свои поля страницы и колонтитулы. Это может разом испортить весь красиво сформированный бланк документа или растянуть страницу на две. JavaScript эту проблему не решит. Поэтому остается лишь попросить пользователя (высветив напоминание) убрать в браузере поля и колонтитулы.

Автор: http://maovrn.habrahabr.ru/

CSS Page-break-after Свойство


Пример

Всегда вставляйте разрыв страницы после элемента