程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

当使用 Chrome 打印一个背景不适合分页符的 div 框时,如何不显示一个框两次?

发布于2023-09-17 18:54     阅读(1225)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

26 0
收藏该文
已收藏

评论内容:(最多支持255个字符)