Распечатать страницу с размером especifi c - CSS Печать - PullRequest
0 голосов
/ 06 января 2020

Я пытаюсь распечатать страницу с указанным размером c (10 см x 5 см). Но когда я отправляю печать, результат не ожидается

enter image description here

Это пример моего билета, и я хотел, чтобы он был напечатан на label.

Но когда я отправляю печать, она выглядит так:

enter image description here

Мой HTML / PHP Код:

        <div class="lacre">
            <div class="h6 font-weight-bold text-primary text-uppercase mb-3">LACRE</div>
            <div class="row mt-2 lacre-body">
                <div class="col-md-3 lacre-qr">
                    <div class="qrcode" data-num="<?= $result->num_lacre ?>"></div> 
                    <div id="qrcode-text">Verifique a situação do lacre</div>       
                </div>
                <div class="col-md-9 lacre-dados">
                    <div class="row">
                        <div class="col-md-4 lb-md-row">Numeração:</div>
                        <div class="col-md-8"><?= $result->num_lacre ?></div>
                    </div>
                    <!-- other lines to show data like div above -->
                </div>
            </div>
        </div>

Код принтера CSS

@media print{
    @page{
        size: 10cm 5cm;
    }
    .lacre{
        width:10cm !important;
        height:5cm !important;
        margin: 0 0 1cm 0 !important;
        display: block !important;
    }
    *{
        color: #000 !important;
    }
    .col-md-3, .col-md-9, .col-md-4, .col-md-8 {
        width: unset;
        max-width: unset;
        flex: unset;
        padding: 1mm;
    }
    .col-md-4, .col-md-8 {
        padding: 0;
        padding-top: 1mm;
    }
    .col-md-4{
        font-weight: 600;
        margin-right: 1mm;
    }
    .row {
        margin: 0 !important;
        padding: 0 !important;
    }
    div#qrcode-text {
        font-size: 3mm;
    }
    .lacre-body {
        padding: 0;
    }
    .lacre-dados {
        display: inline-block;
        width: 5.7cm;
        font-size: 2.5mm !important;
    }

    canvas {
        width: 4cm;
        height: 4cm;
    }
    .h6.font-weight-bold.text-primary.text-uppercase.mb-3 {
        display: none;
    }
    #accordionSidebar, #topbar, footer, .scroll-to-top { 
        display: none !important; 
    }   
}

Я пробовал поле: 0 на @page {}, но оно все равно не работало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...