Предотвращение разрывов страниц в таблице при печати - PullRequest
21 голосов
/ 11 мая 2011

У меня есть страница, которую я пытаюсь настроить для печати. Эта страница содержит большое количество отдельных таблиц. Таблицы имеют разный размер, но в целом я могу разместить от 2,5 до 3 таблиц на каждой странице. Я хотел бы иметь возможность предотвратить разрыв таблиц из-за разрыва страницы. Есть идеи, как мне этого добиться?

Я пробовал это:

.reportTable {
    page-break-inside: avoid;
}

К сожалению, page-break-inside поддерживается только в Opera (согласно W3Schools - я убедился, что это не работает в Firefox 4.0.1).

Я могу сделать это, чтобы вызвать разрыв страницы перед каждой таблицей:

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

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

Я знаю, что у меня есть пользователи, использующие Internet Explorer, Firefox и Safari, поэтому я бы хотел как можно больше их поддерживать. Найти что-то, что также будет работать в Chrome и Opera, было бы очень приятным бонусом.

Есть идеи?

Ответы [ 5 ]

4 голосов
/ 11 июня 2011

Я тоже искал ответ на этот вопрос.Самое близкое, что я нашел, - это узнать, сколько примерно строк вывода поместится на странице, а затем вычислить, сколько строк вывода у этой страницы.В вашем случае: 1) выясните, сколько строк вывода вы можете разместить на странице.2) отслеживайте, сколько строк вы уже использовали, отображая вашу первую таблицу.3) подсчитайте, сколько строк займет таблица 2.Добавьте его в строки таблицы 1 и посмотрите, не превышаете ли вы приблизительный порог.Если да, отобразите таблицу, если нет, поставьте div с разрывом страницы: всегда в нем, чтобы вызвать новую таблицу.

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

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

Надеюсь, чтозажигает идею для вас.

1 голос
/ 09 июня 2011

В настоящее время, похоже, нет способа заставить браузеры, которые не поддерживают page-break-inside: avoid, сделать это.

Однако, поскольку вы можете разместить от 2,5 до 3 таблиц на каждой странице и предпочитаете не печатать только одну таблицу, используя page-break-after: always;, вы можете добавить специальную div, котораявызывает разрыв страницы после каждых двух таблиц .

Таким образом, вы должны включить <div class="pageBreak"></div> и скрыть его для экрана, но отобразить его для печати.И вы бы дали ему стиль page-break-after: always;.Таким образом, вы получаете не менее двух таблиц на страницу.

Еще одно предложение - позволить пользователю решить, хочет ли он / она печатать одну таблицу на страницу или столько, сколько может уместиться (с некоторымивозможно разделить по страницам).Вы можете переключить checkbox, чтобы добавить стиль page-break-after: always; к таблицам.

0 голосов
/ 17 июля 2019

Это очень старый вопрос, поэтому просто хотел обновить этот разрыв страницы: избегать; теперь поддерживается в большинстве основных браузеров. Хотя есть некоторые особенности, чтобы убедиться, что page-break-xxx работает (НИКАКОЙ родитель на любом уровне не может иметь положение: исправлено, элемент и прямой родитель должны иметь положение: относительное и отображение: блок и т. Д.).

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

0 голосов
/ 17 ноября 2017

, чтобы исправить это, просто сделайте #table {page-break-after: auto;}

0 голосов
/ 12 мая 2011

Не все принтеры созданы одинаково.

У вас возникли проблемы, поскольку принтер не контролируется ни веб-браузером, ни HTML-кодом. Он управляется драйвером принтера, который поставляется вместе с принтером. Эта функция (и ее настройки) принадлежит владельцу компьютера, отображающего страницу, а не вам.

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

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

Чтобы получить всю таблицу (или несколько таблиц) на странице, пользователь должен выбрать части, которые он хочет напечатать, и затем использовать выбор печати в диалоговом окне принтера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...