Подогнать размер печати под формат бумаги

100

12 апреля 2022, 07:40

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>...</title>
        <...скрипты и css, включая bootstrap...>
        <style type="text/css">
            @page {
                size: auto !important; /* Если прописывать в CSS файле, то почему-то не хочет работать */
                margin: 0 !important;
            }
        </style>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="printBlock" style="width: 90mm;" class="px-3">
            <table class="table table-borderless">
                <tbody>
                <tr>
                    <td class="text-left p-0"><h5 class="text-muted" style="font-size: 12pt;">** 08.11.2020 11:44 **</h5></td>
                    <td class="text-right p-0"><h5 class="text-muted" style="font-size: 12pt;">** НАИМЕНОВАНИЕ **</h5></td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <h1 class="text-center" style="font-size: 32pt;">СР2569</h1>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <strong style="font-size: 11pt;">Номер терминала: 01</strong>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <strong style="font-size: 11pt;">Телефон водителя: 88888888888</strong>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <strong style="font-size: 11pt;">Телефон администратора: 88888888888</strong>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="p-0">
                        <strong style="font-size: 11pt;">Мониторинг очереди: site.ru</strong>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Данное решение удалось подогнать под принтер Custom VKP80II, подозреваю, что существуют другие с другим форматом страницы. Если указывать не фиксированную ширину, то содержимое "улезает" за границы бумаги.

JS Код для получения печати:

let printWindow = window.open('', 'PRINT', 'width=450,height=250');
printWindow.document.write(data.ticketHtml); // HTML страницы получаем ассинхронно
printWindow.document.close();
printWindow.focus();
setTimeout(function () {
    printWindow.print();
    printWindow.close();
}, 1000);

Answer 1

Печатайте в PDF. PDF легче печатается. Должно быть без разницы какой принтер. А вот страничку верстать надо так чтобы не надо было подключать скрипты и сложные CSSки на страницу для печати.