如何修复最后一页底部的页脚？答案

【问题标题】：How to fix the footer in bottom of last page?如何修复最后一页底部的页脚？
【发布时间】：2018-11-07 07:20:17
【问题描述】：

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

【问题讨论】：

您当前的代码看起来如何？ :)
目前在每个页面底部显示页脚。我使用css作为页脚是页脚{位置：绝对；底部：0px；左：0px；右：0px；边距：10px； }
可以截图吗？
你能分享你的代码吗？
这是我的页脚 h1>

【解决方案1】：

试试这个，

如果这有帮助，请告诉我。

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

【讨论】：

【解决方案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

【讨论】：