我正在尝试将生成的 HTML 文档打印为 PDF。文档本身可以容纳多页。每个页面都是这样构建的：
<!-- Header -->
<!-- Content -->
<!-- Footer -->
这三者在每一页上看起来都很好。唯一的问题是页脚不会粘在底部...页脚将始终赶上页面的最后一个元素。只要页面填充了足够的内容，页脚就会像您期望的那样位于底部。
这是我的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，如下所示：
@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：
<link rel="stylesheet" href="./main.min.css" media="all">
旁注：
- 我只需要 Chrome 支持，因为我正在使用
electron framework
- 我正在使用这个：https://github.com/delight-im/HTML-Sheets-of-PaperCSS 文件使页面可见，就像它们将被打印给用户一样。
- 逻辑是使用 Node.js 7.5 构建的
我做了一些研究并尝试了这些问题的答案但没有成功：
- 打印时将每页上的自定义页脚粘贴到底部
- 在打印时在特定页面的底部创建一个 div
- 如何使用 HTML 在文档的每个打印页上打印页眉和页脚？
那么有没有可能用纯 CSS 来实现这一点呢？如果没有，我还会构建一些逻辑来填充页脚上方的所有空白空间，直到页面达到其最大大小。
好吧，由于某些奇怪的原因，解决方案非常简单。
不过我已经改变了我的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;
}
to this:
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.7 厘米，所以很容易将元素设置到底部，同时使其从顶部绝对定位top: 27.7cm
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
