如何解决HTML 到 PDF:元素重叠固定页脚
我想将 HTML 呈现为 PDF。为了让它工作,我使用了 Browsershot,它使用无头 Chrome 来呈现 HTML 和 CSS。
这是我适合 A4 格式的附加样式:
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<!-- Styles -->
<link href="{{ asset(('/css/app.css')) }}" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,700;0,900;1,900&display=swap"
rel="stylesheet">
<style>
@page {
size: A4;
margin: 11mm 17mm 6mm 17mm;
}
@media print {
#footer {
position: fixed;
bottom: 0;
}
.unbreak-element {
page-break-inside: avoid;
page-break-after: avoid;
}
/* html,body {
height: 297mm;
}*/
}
</style>
</head>
这是我的页脚,包括:
<div class="grid grid-cols-3" id="footer">
<address class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</address>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
<div class="text-muted not-italic text-xs text-gray-900 font-extralight">
Text <br/>
Text <br/>
Text <br/>
Text <br/>
</div>
</div>
我的问题是:非常大的元素现在像这样重叠页脚部分:
我的问题:如何避免重叠并将表格拆分到下一页?
解决方法
有 an answer 回答了一个类似的问题,其中提到了 an article 可能会对您有所帮助。
它的要点是你需要表格来为固定页脚保留底部的空间:
.main-footer .inner {
bottom: 0;
position: fixed;
}
<table>
<tbody>
<tr>
<td>
<header>
<h1>Page Title</h1>
</header>
<p>Lorem ipsum...</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<footer class="main-footer">
<div class="inner">
<small>© YEAR AUTHOR</small>
</div>
</footer>
</td>
</tr>
</tfoot>
</table>
这并不理想,因为这些不是语义表。我设法让 CSS 表像这样在 Firefox 中工作:
body {
display: table;
}
.main-header,.main-body {
display: table-row-group;
}
.main-footer {
display: table-footer-group;
}
<header class="main-header">
<h1>Page Title</h1>
</header>
<div class="main-body">
<p>Lorem ipsum...</p>
</div>
<footer class="main-footer">
<small>© YEAR AUTHOR</small>
</footer>
然而,一旦我尝试将页脚固定到底部位置
<footer class="main-footer">
<div class="inner">
<!-- footer content -->
</div>
</div>
.main-footer {
display: table-footer-group;
}
.main-footer::after {
content: "";
display: block;
height: 2em;
}
.main-footer .inner {
bottom: 0;
display: block;
position: fixed;
}
...firefox 页脚被绘制两次(有轻微的偏移)。我相信这是一个浏览器错误。
一直以来,CSS 表格都无法在 Chrome 中使用(我也认为这是一个错误)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。