Удаление кнопки печати из онлайн-квитанции с помощью @media print

В этой статье вы узнаете, как удалить «кнопку печати» из онлайн-документа или квитанции. Но сначала вам нужно научиться использовать команду печати JavaScript(Js).

Разработка дизайна документа или квитанции

Сначала нам нужно написать HTML для печати документа или квитанции, я буду использовать таблицу, чтобы показать содержимое квитанции в красивом формате.

Вот фрагмент кода для вас:

<!doctype html>
<html lang="en">
  <head>
    <title>Receipt Demo</title>
    <style type="text/css">
        * {
            font-size: 12px;
            font-family: 'Times New Roman';
        }

        td,th, tr,table {
            border-top: 1px solid black;
            border-collapse: collapse;
        }

        td.description,th.description {
            width: 75px;
            max-width: 75px;
        }

        td.quantity,th.quantity,td.price,th.price {
            width: 40px;
            max-width: 40px;
            word-break: break-all;
        }

        .centered {
            text-align: center;
            align-content: center;
        }

        .ticket {
            width: 155px;
            max-width: 155px;
        }

        @media print {
            .hidden-print,.hidden-print * {
                display: none !important;
            }
        }
    </style>
  </head>
  <body>
  <div class="ticket">    
            <p class="centered">RECEIPT EXAMPLE
                <br>Address line 1
                <br>Address line 2</p>
            <table>
                <thead>
                    <tr>
                        <th class="quantity">Q.</th>
                        <th class="description">Description</th>
                        <th class="price">$$</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="quantity">1.00</td>
                        <td class="description">WHITE CREATIVITY HANDBOOK</td>
                        <td class="price">$25.00</td>
                    </tr>
                    <tr>
                        <td class="quantity">2.00</td>
                        <td class="description">SWEETS</td>
                        <td class="price">$5.00</td>
                    </tr>
                    <tr>
                        <td class="quantity">1.00</td>
                        <td class="description">FANS</td>
                        <td class="price">$10.00</td>
                    </tr>
                    <tr>
                        <td class="quantity"></td>
                        <td class="description">TOTAL</td>
                        <td class="price">$40.00</td>
                    </tr>
                </tbody>
            </table>
            <p class="centered">Thanks for your purchase!
                <br>Legends Only</p>
        </div>
        <button id="btnPrint" class="hidden-print" onclick="window.print()">Print</button>      
  </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

Примечание: Мы использовали команду «window.print()» при нажатии на кнопку печати, чтобы вызвать диалоговое окно печати. Это статический пример, вы всегда можете использовать фреймворк (на стороне клиента или сервера) для динамического отображения содержимого.

Скрытие кнопки

В CSS медиазапрос позволяет определить другой стиль для HTML-элемента при различных сценариях, например, @media screen помогает написать CSS для разных размеров экрана, чтобы скрыть нашу кнопку печати, мы будем использовать @media print, что позволяет нам установить стиль для HTML-элемента во время печати.
Мы установили CSS свойство display нашей кнопки печати на «none» в запросе @media print, который используется для скрытия кнопки при печати документа/квитанции.

Оцените статью
Procodings.ru
Добавить комментарий