发布于2023-09-17 18:54 阅读(1265) 评论(0) 点赞(26) 收藏(3)
看一下下图(Chrome 中的页面打印对话框):
灰色背景的 DIV 不再适合第一页,因此浏览器决定将整个 div 移动到新页面(这就是我想要的)。
然而,我想要摆脱的是第一页上带有背景颜色的空框(源自同一个 DIV)。
有没有办法将整个盒子包装到下一页?并且根本不将其显示在第一页上(如果不适合)。
最后,我对打印页面不感兴趣,而是使用wkhtml2pdf从此 HTML 生成 PDF。但这是同一个问题。
所以仅使用 webkit 的解决方案对我来说就很好了。
如果您想尝试一下上图中可以看到的内容,这里是 HTML / CSS 代码。只需在 Chrome 中打开打印对话框,您应该会看到相同的结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PP-00000074</title>
<style>
html {
margin: 0;
padding: 0;
align-self: center;
}
body {
padding: 0;
align-self: center;
margin: 0;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-size: 13px;
margin-bottom: 45px;
}
table tr {
page-break-inside: avoid;
}
thead {
width: 100%;
align-self: center;
}
thead tr {
border-bottom: 15px solid white;
}
th {
color: #000000;
font-weight: normal;
}
td {
color: #7a7a7a;
word-break: break-word;
}
tr.spaceAbove>td {
padding-top: 20px;
}
.nowrap {
white-space: nowrap;
}
.centerBodyBox {
margin: 0 100px;
}
.invoiceTotal {
page-break-inside: avoid;
background-color: #eeeeee;
font-size: 13px;
line-height: 1.56;
text-align: right;
color: #000000;
}
.invoiceTotalColumn1 {
font-size: 12px;
color: #7a7a7a;
padding: 35px 0;
vertical-align: bottom;
}
.invoiceTotalColumn2 {
width: 25%;
padding: 35px 0;
vertical-align: top;
}
.invoiceTotalColumn3 {
width: 15%;
padding: 35px 0;
vertical-align: top;
}
.text-left {
text-align: left;
padding-right: 10px;
}
.text-right {
text-align: right;
padding-left: 10px;
}
.align-top {
vertical-align: top;
}
</style>
</head>
<body>
<div class="centerBodyBox">
<table>
<thead>
<tr >
<th class="text-left">Beschreibung</th>
<th class="text-right">Preis</th>
<th class="text-right">Menge</th>
<th class="text-right">Mwst.</th>
<th class="text-right">Gesamt</th>
</tr>
</thead>
<tr class="spaceAbove">
<td class="text-left align-top">magni voluptates</td>
<td class="nowrap text-right align-top">15,42 EUR</td>
<td class="nowrap text-right align-top">2 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">30,84 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">rerum ipsa</td>
<td class="nowrap text-right align-top">11,93 EUR</td>
<td class="nowrap text-right align-top">2 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">23,86 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">rem consequuntur</td>
<td class="nowrap text-right align-top">137,50 EUR</td>
<td class="nowrap text-right align-top">1 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">137,50 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
<tr class="spaceAbove">
<td class="text-left align-top">omnis ut</td>
<td class="nowrap text-right align-top">44,31 EUR</td>
<td class="nowrap text-right align-top">3 </td>
<td class="nowrap text-right align-top">19%</td>
<td class="nowrap text-right align-top">132,93 EUR</td>
</tr>
</table>
</div>
<div class="invoiceTotal">
<div class="centerBodyBox">
<table style="margin: 0">
<tr>
<td class="invoiceTotalColumn1 text-left">
Some text.
</td>
<td class="invoiceTotalColumn2 nowrap text-right">
<div>Zwischensumme (Brutto):</div>
<div>Versandkosten:</div>
<div>Zahlungsmethode:
</div>
<div>Nettobetrag (ohne Mwst):</div>
<div>zzgl. 19% Mwst.:
</div>
<div style="margin-top: 20px;"><b>Gesamtbetrag (Brutto):</b>
</div>
</td>
<td class="invoiceTotalColumn3 nowrap text-right">
<div>325,13 EUR</div>
<div>4,47 EUR</div>
<div>4,16 EUR</div>
<div >280,51 EUR</div>
<div>53,25 EUR</div>
<div style="margin-top: 20px;"><b>333,76 EUR</b></div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
您可以将 page-break-inside 与 一起使用.invoiceTotal
。
但发票总计正在崩溃。添加page-break-inside:avoid
到身体。
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/531379/6cf42a06b48bd0a3c266/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!