Мой пользовательский CSS не работает в счет-фактуре печати

Question

Я работаю над страницей, на которой есть пользовательский CSS, и я хотел напечатать эту страницу, но она не работает для меня.@media print {background-color:red !important;} Этот печатный носитель не работает для меня.Я пробую все те возможности, которые уже находятся на stackoverflow, но ни одна из них не работает.

  var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;

      body {
                -webkit-print-color-adjust: exact !important;
            }

            .seat_no{
                border: 1px solid #ddd !important;
                padding: 4px 8px !important;
                color: black !important;
                display: block;
                font-size: 19px !important;
                cursor: pointer;
                visibility: visible;
                page-break-inside: auto !important;
                display: block !important;
                -webkit-print-color-adjust: exact !important;

            }
            .table thead{
                background: #585a6b !important;
                color: #fff !important;
                -webkit-print-color-adjust: exact !important;
            }
            .booked {
                background-color: #296090 !important;
                visibility: visible;
                page-break-inside: auto !important;
                display: inline block !important;
                overflow: visible !important;
                -webkit-print-color-adjust: exact !important;
            }

  <button type="button" class="btn btn-primary print-invoice-btn mt " onclick="PrintInvoice('print-invoice')" >Print Details</button>

Answer 1

@media print {background-color:red !important;} недействительно.Правильный синтаксис выглядит так:

@media print {
  div {
    background-color: red
  }
}

Вот пример для вас:

@media print{
  * {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    box-sizing: border-box
  }

  div {
    background-color: #424953;
    width: 100%;
    height: 100%;
    padding: 10% 0
  }

  button {
    background-color: #4B89DA;
    color: #F4F6F9;
    width: 50%;
    border: solid 2px #F4F6F9;
    padding: 30px;
    border-radius: 10px;
    display: block;
    margin: auto
  }
}

<div>
  <button onclick="window.print();">Click me to see the changes!</button>
</div>