it-swarm.com.ru

Как бороться с разрывами страниц при печати больших таблиц HTML

У меня есть проект, который требует печати таблицы HTML с множеством строк.

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

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

247
h3.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>
261
Sinan Ünür

Примечание: при использовании разрыва страницы: всегда для тега он создает разрыв страницы после последнего бита таблицы, каждый раз создавая полностью пустую страницу в конце! Чтобы это исправить, просто измените его на разрыва страницы: авто. Он будет правильно разорван и не создаст лишнюю пустую страницу.

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>
41
Josh P

Расширение от решения Синан Юнюр:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

Похоже, что page-break-inside:avoid в некоторых браузерах учитывается только для элементов блока, а не для ячейки, таблицы, строки или встроенного блока.

Если вы попытаетесь использовать display:block для тега TR и использовать там page-break-inside:avoid, это сработает, но все испортит ваш макет таблицы.

20
vicenteherrera

Ни один из ответов здесь не работал для меня в Chrome. AAverin на GitHub создал некоторый полезный Javascript для этой цели , и это сработало для меня:

Просто добавьте js в ваш код и добавьте класс "splitForPrint" к вашей таблице, и он аккуратно разделит таблицу на несколько страниц и добавит заголовок таблицы на каждую страницу.

9
MDave

Используйте эти свойства CSS:

page-break-after

page-break-before 

Например:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

через

6
marcgg

Я недавно решил эту проблему с хорошим решением.

CSS:

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS:

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

Работает как шарм!

4
Wendel Tavares

Я закончил тем, что следовал подходу @ vicenteherrera, с некоторыми изменениями (которые, возможно, специфичны для bootstrap 3).

В принципе; мы не можем сломать trs или tds, потому что они не являются элементами уровня блока. Поэтому мы встраиваем divs в каждый из них и применяем наши правила page-break-* к div. Во-вторых, мы добавляем некоторые отступы к вершине каждого из этих элементов, чтобы компенсировать любые артефакты моделирования.

<style>
    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        // Wrap each tr and td's content within a div
        // (todo: add logic so we only do this when printing)
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>

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

1
Aaron

Я проверил много решений, и никто не работал хорошо.

Итак, я попробовал маленький трюк, и он работает:

tfoot со стилем: position: fixed; bottom: 0px; помещается внизу последней страницы, но если нижний колонтитул слишком высокий, он перекрывается содержимым таблицы.

tfoot with only: display: table-footer-group; не перекрывается, но не находится внизу последней страницы ...

Давайте поставим два tfoot:

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;  
  height: 130px;
}
<TFOOT  class='placer'> 
  <TR>
    <TD>
      <!--  empty here
-->
    </TD>
  </TR>
</TFOOT>  
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

Один резервирует место на непоследних страницах, второй добавляет ваш обычный нижний колонтитул.

0
Zenon K.