如何在最后一页底部固定页脚？

Question

在Jsreport中有5到6页的内容。我也有页脚。所以我想在最后一页的底部设置页脚。请任何人建议。

Answer 1

尝试一下

让我知道这是否有帮助。

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

Answer 2

我认为您不能仅使用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 utils扩展，以将页脚模板与选定的“为每个页面渲染”合并。

我在jsreport操场上准备了演示，因此您可以摆弄它。 https://playground.jsreport.net/w/anon/~~Cb62wD