JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Печать с медиа-запросами</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Контент страницы -->
    <div id="modal_edit">
        <h3>Детали заказа</h3>
        <p>Здесь будет информация о заказе...</p>
        <p>Детали, которые будут видны только при печати.</p>
    </div>

    <!-- Кнопка для печати -->
    <a href="#!" onclick="printPage()" class="modal-close waves-effect waves-red btn-flat">Печать</a>

    <script>
        function printPage() {
            window.print();
        }
    </script>

</body>
</html>

CSS

/* Обычные стили */
#modal_edit {
    background-color: #f9f9f9;
    padding: 20px;
}

/* Стили для печати */
@media print {
    body {
        font-family: Arial, sans-serif;
    }

    #modal_edit {
        background-color: white;  /* Сделаем фон белым при печати */
        padding: 30px;
        border: 1px solid #ccc;
    }

    /* Скрыть элементы, которые не должны быть напечатаны */
    .no-print {
        display: none;
    }

    /* Убрать ненужные кнопки */
    .waves-effect {
        display: none;
    }
}