我正在尝试将生成的 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">
旁注:
electron 框架
electron framework
我做了一些研究并尝试了这些问题的答案,但没有成功:
I did some research and tried out the answers from these questions with no success:
那么有没有可能用纯 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
这篇关于打印:如何将每页的页脚粘贴到底部?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!