it-swarm.com.ru

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

Я использую таблицу для создания нижнего колонтитула на каждой странице (работает в Firefox, этого достаточно).

JS Fiddle: https://jsfiddle.net/j9k2xzze/

(щелкните правой кнопкой мыши на панели вывода -> Этот фрейм -> Открыть фрейм в новой вкладке. После этого предварительный просмотр будет работать как обычно)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

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

Мне нравится, что нижний колонтитул находится в самом низу на последней странице .. К сожалению, расширение @page не работает в Firefox, или я делаю это неправильно:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}
21
LeMike

Если вы поддерживаете только Firefox, это действительно очень просто (перейдите к редактированию, чтобы увидеть технику, которая также работает в IE, но менее универсальна). Просто добавьте большое нижнее поле в конце вашего контента. Он должен быть достаточно большим, чтобы гарантированно проходить через конец страницы. Браузер предполагает, что вы не хотите печатать пустую страницу в конце документа, поэтому он обрезает столько полей, сколько необходимо, чтобы избежать этого, оставляя только достаточно, чтобы перенести нижний колонтитул в конец страницы.

Вы можете поместить поле на псевдоэлемент , чтобы сохранить HTML в чистоте, и вы можете использовать @media print , чтобы предотвратить его отображение на экране.

Вот код Чтобы увидеть, как он работает в Firefox, откройте этот jsfiddle , щелкните правой кнопкой мыши на выводе, выберите «Этот кадр»> «Показать только этот кадр» и выполните предварительный просмотр.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

Эта техника не работает ни в одном браузере, кроме Firefox. В IE, когда разрыв страницы происходит внутри вертикального поля, все поле удаляется - что на самом деле является правильным поведением согласно W3C (раздел 13.3.3) - но не волнуйтесь, поведение Firefox фактически идентичен, за исключением случаев, когда есть нижний колонтитул таблицы, и в этом случае он на самом деле лучше, поэтому я сомневаюсь, что он когда-нибудь изменится.

Chrome и другие браузеры Webkit (Safari, Opera) даже не поддерживают повторяющиеся нижние колонтитулы, поэтому они не имеют значения. Думаю, я не проверял этот подход в Edge, но я уверен, что он не сработает.


ПРАВКА

Есть еще один вариант, который работает как в Firefox, так и в IE. Все, что вам нужно сделать, это поместить нижний колонтитул в отдельный <div> и закрепить его в нижней части страницы, а затем использовать повторяющийся <tfoot> в качестве разделителя. Этот подход имеет некоторые незначительные недостатки (подробности ниже).

Вот код Чтобы увидеть, как он работает в Firefox, откройте этот jsfiddle , щелкните правой кнопкой мыши на выводе, выберите «Этот кадр»> «Показать только этот кадр» и выполните предварительный просмотр. В IE нажмите на выходной кадр, нажмите CTRL + A, сделайте предварительный просмотр и измените «Как выложено на экране» на «Как выбрано на экране».

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

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

9
DoctorDestructo

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

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.Push {
  height: 50px;
}

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

0
Matej Janovčík