打印:如何将每页的页脚粘贴到底部?

2022-01-10 00:00:00 pdf node.js electron javascript css

我正在尝试将生成的 HTML 文档打印为 PDF.文档本身可以包含多个页面.每个页面都是这样构建的:

I'm trying to print a generated HTML document to PDF. The document itself can hold multiple pages. Every page is built up like this:

<!-- Header -->

<!-- Content -->

<!-- Footer -->

这三个在每一页上看起来都很好.唯一的问题是页脚不会粘在底部......页脚将始终赶上页面的最后一个元素.只要页面填充了足够的内容，页脚就会像您期望的那样位于底部.

All three look fine on every page. The only problem is that the footer won't stick at the bottom... The footer will always catch up with the last element of the page. As long as the page is filled with enough content the footer will be at the bottom as you would expect it to be.

这是我的 CSS:

.docFooter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

我也尝试过像这样生成一个单独的 CSS:

I've also tried to generate a separate CSS like this:

@media print{
    .docFooter{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        bottom: 0;
        padding-right: 2cm;
        padding-bottom: 1cm;
    }
}

当然，我正在使用这样的 CSS:

And of course I'm using the CSS like this:

<link rel="stylesheet" href="./main.min.css" media="all">

旁注:

  • 我只需要 Chrome 支持，因为我正在使用 electron 框架
    • 进行开发
  • 我正在使用这个:https://github.com/delight-im/HTML-Sheets-of-Paper CSS 文件使页面可见，就像它们将要打印给用户一样.
  • Logic 使用 Node.js 7.5 构建
  • I just need Chrome support, since I'm developing with the electron framework
  • I'm using this: https://github.com/delight-im/HTML-Sheets-of-Paper CSS files to make pages visible like they are going to be printed to the user.
  • Logic is built with Node.js 7.5

我做了一些研究并尝试了这些问题的答案，但没有成功:

I did some research and tried out the answers from these questions with no success:

  • 将自定义页脚粘贴到每页底部同时打印
  • 在打印时特定页面的底部
  • 如何使用 HTML 在文档的每个打印页面上打印页眉和页脚?

那么有没有可能用纯 CSS 来实现呢?如果没有，我还会构建一些逻辑来填充页脚上方的所有空白空间，直到页面达到其最大尺寸.

推荐答案

好的，由于某些奇怪的原因，解决方案非常简单.但是我已经改变了我的 CSS:

Ok, the solution was super easy for some strange reason. However I've changed my CSS from this:

.docFooter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

到这里:

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 27.7cm !important;
    padding-right: 2cm !important;

因为我知道 A4 页面不会超过 29.7cm，所以很容易将元素设置到底部，同时使用 top: 27.7cm

Since I know that a A4 page won't exceed 29.7cm it was easy to set the element to the bottom while making it absolute positioned coming from top with top: 27.7cm

相关文章