Как не отображать окно дважды при печати в Chrome поле div с фоном, который не помещается до разрыва страницы? - PullRequest
Новая
       16

Как не отображать окно дважды при печати в Chrome поле div с фоном, который не помещается до разрыва страницы?

0 голосов
/ 24 октября 2018

Посмотрите на следующее изображение (диалоговое окно печати страницы в Chrome):

enter image description here

DIV с серым фоном не помещается на первомстраницы, поэтому браузер решает переместить весь div на новую страницу (именно это я и хочу).

От чего я, однако, хочу избавиться, это пустое поле с цветом фона на первой странице.(который происходит от того же самого DIV).

Есть ли способ перенести весь блок на следующую страницу?И вообще не отображать его на первой странице (если он не умещается).

В конце концов я не заинтересован в печати страницы, а скорее использую wkhtml2pdf создать PDF из этого HTML.Но это та же самая проблема.

Так что для меня подойдет только решение для веб-набора.

Вот код 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>

1 Ответ

0 голосов
/ 24 октября 2018

Вы используете разрыва страницы с .invoiceTotal.

Но это invoiceTotal, который ломается.Добавьте page-break-inside:avoid к телу.

...