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

Question

В Jsreport у меня от 5 до 6 страниц контента. У меня также есть нижний колонтитул. Поэтому я хочу установить нижний колонтитул в нижней части последней страницы. Пожалуйста, кто-нибудь предложить.

Answer 1

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

Однако я считаю, что вы можете решить эту проблему с помощью jsreport pdf-utils extension . Трюк выглядит так.

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

{{#lastPage}}
<style>
    .footer {
        position: fixed; 
        bottom: 0; 
        width: 100%; 
        background-color: red;
    }
</style>
<div class='footer'>
    content
</div>
{{/lastPage}}

// custom helper
function lastPage(opts) {      
  if (this.$pdf.pageIndex === (this.$pdf.pages.length - 1)) {
    return opts.fn(this)
  }

  return ''
}

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

<!--placeholder for the footer-->
<div style='height:50px;'></div>

Последний шаг - настроить расширение утилиты pdf для объединения шаблона нижнего колонтитула с выбранным «рендерингом для каждой страницы».

Я подготовил демо на игровой площадке jsreport, чтобы вы могли поиграть с ним. https://playground.jsreport.net/w/anon/~~Cb62wD

Answer 2

Попробуйте это,

Дайте мне знать, если это полезно.

<footer style=" position:fixed; bottom:0px; left:0px; right:0px;border:1px solid red;">
 <h1>This is my footer</h1>
</footer>