Блог

Главная - Вопросы по программированию - При печати появляется дополнительная пустая страница

При печати появляется дополнительная пустая страница

#javascript #html #css #printing

#javascript #HTML #css #печать

Вопрос:

Я пытаюсь распечатать страницу, при попытке распечатать она показывает дополнительную пустую страницу в конце. Я пытался добавить height: 99% !important; page-break-after: avoid; в CSS, но это не работает. Я перепробовал большинство решений в stackoverflow. Вот мой код

 <html>
<head>
<style type="text/css" media="print">
@media print {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 99% !important;
        page-break-after: avoid;
        page-break-before: avoid;
    }
    table:nth-of-type(2) {
        margin-bottom: 0;
        page-break-inside: avoid;
    }
    @page {
        page-break-inside: avoid;
        size: A4 landscape;
        margin: 10;
    }

}
</style>
<style type="text/css">
page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
    width: 29.7cm;
    height: 21cm;
}
.table-wtotbr {
    width: 100%;
}

.table-wtbr {
    width: 100%;
}

.table-wtotbr th, td {
    border-bottom: 1px solid black;
}
.table-wtbr th, td {
    border: 1px solid black;
}
.container-table {
    width: 100%;
    height: 100%;
    font-size:16px;
    
}
</style>
</head>
<body>
    <page size="A4" layout="landscape">
    <div class="container-table"></div>
    </page>
</body>
</html>

Может ли кто-нибудь помочь мне решить эту проблему. И есть ли какой-либо способ добавить функцию для печати.
Заранее благодарю вас.

Ответ №1:

Я изменил CSS таким образом

 @media print {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        height: 100vh !important;
    }
}

здесь важно то, height: 100vh !important;