Невозможно css на window.print()

EDITED: первый уже был решен, но это проект, над которым я работал, тот, который я удалил, был просто тестом, в любом случае ответ на предыдущий пост до того, как я отредактировал это, был решен, я применил то же решение, но не может решить проблему. может кто-нибудь сказать мне разницу, почему это не будет работать по сравнению с предыдущим, спасибо :).

<!DOCTYPE html>
<html>
<head>
    <link href = "//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" id = "bootstrap-css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel = "stylesheet" type = "text/css"/>
    <link rel = "stylesheet" type = "text/css" href = "src/jquery.timepicker.min.css">
    <script src = "src/jquery.timepicker.min.js"></script>
</head>
<style>
    @media print {
      .active {
        background-color: #ff0000;
      }
    }
    .card-default {
        color: #333;
        background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent;
        font-weight: 600;
        border-radius: 6px;
    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: center;    
    }
    .signature {
        border: 0;
        border-bottom: 1px solid #000;
    }
    .active {
        background-color: #ff0000;
    }
    input {
        text-align: center;
    }
</style>

<script type = "text/javascript">
    var total = 0;
    var meal_allow_table = document.getElementsByClassName("meal_allow");
    var days = [];



    $(document).ready(function() {
      $("table").find("input").attr("disabled", true);

      $('input[name = "inlineRadioOptions"]').change(function () {
        $("table").find("input").removeAttr("disabled");
        if ($('#pay_period_from').prop('checked')) {
          $('.first-period').addClass('active');
          $('.second-period').removeClass('active');
        }else if ($('#pay_period_to').prop('checked')) {
          $('.second-period').addClass('active');
          $('.first-period').removeClass('active');
        }
      });
    });

    function printForm() {
      window.print();
    }



</script>

<body>
    <div class = "container">
        <div id = "accordion">
            <div class = "row">
                <div class = "col-lg-12">
                    <div class = "text-center">
                        <h3>LINA GROUP OF COMPANIES</h3>
                    </div>
                </div>
            </div>
            <div class = "card card-default">
                <div class = "card-header">
                    <h4 class = "card-title">
                        <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapse1">
                            <i class = "glyphicon glyphicon-search text-gold"></i>
                            <b>Meal and Overtime Authorization Form</b>
                        </a>
                    </h4>
                </div>
                <div id=hideDiv>
                    <form action = "index.php" method = "POST">       
                        <div id = "collapse1" class = "collapse show">
                            <div class = "card-body">
                                <div class = "row">
                                    <div class = "col-md-3 col-lg-6">
                                        <div class = "form-group">
                                            <label class = "control-label">Company:</label>
                                            <input id = "inputCompany" name = "company" type = "text" class = "form-control"  />
                                        </div>
                                    </div>
                                    <div class = "col-md-1 col-lg-4">
                                        <!--  <div class = "form-group">
                                        <label class = "control-label">Dept/Location:</label>
                                        <input type = "text" class = "form-control" />
                                        </div> -->
                                    </div>

                                </div>
                                <div class = "row">

                                    <!-- <div class = "col-md-2 col-lg-3">
                                    <div class = "form-group">
                                    <label class = "control-label">City</label>
                                    <input type = "text" class = "form-control" />
                                    </div>
                                    </div> -->
                                    <div class = "col-md-2 col-lg-6">
                                        <div class = "form-group">
                                            <label class = "control-label">Pay Period:</label>
                                            <div class = "row">
                                                <div class = "form-check col-lg-2"></div>
                                                <div class = "form-check col-lg-5">
                                                    <input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "pay_period_from" value = "option1">
                                                    <label class = "form-check-label" for = "inlineRadio1">Day 1 - 15 </label>
                                                </div>
                                                <div class = "form-check col-lg-5">
                                                    <input class = "form-check-input" type = "radio" name = "inlineRadioOptions" id = "pay_period_to" value = "option2">
                                                    <label class = "form-check-label" for = "inlineRadio2">Day 16 - 31 </label>
                                                </div>
                                            </div>      
                                        </div>
                                    </div>

                                </div>


                                <div class = "row">
                                    <div class = "col-lg-12">
                                        <div class = "pull-right">
                                            <button class = "btn btn-success btn-lg" type = "submit" name = "btnSubmit" id = "btnSubmit"><i class = "fa fa-save"></i> Save</button>
                                            <button class = "btn btn-success btn-lg" type = "submit" name = "btnPrint" id = "btnPrint" onclick = "printForm()"><i class = "fa fa-save"></i> Print</button>
                                            <a class = "btn btn-warning btn-lg" href = "#" id = "btnToTop"><i class = "fa fa-arrow-up"></i> Top</a>
                                        </div>
                                    </div>
                                </div>
                                </form>
                            </div>
                          </div>
                          </div>
                          </div>
                          </div>
                            <div id = "div">
                                <table class = "table" style = "width:100%">
                                    <tr>
                                        <th colspan = "2" rowspan = "3" style = "vertical-align: middle;" >Date</th>
                                        <th colspan = "2" style = "vertical-align: middle;">OT Field</th>
                                        <th rowspan = "3" style = "vertical-align: middle;">Purpose of Overtime</th>
                                        <th rowspan = "3" style = "vertical-align: middle;">OT hours</th>
                                        <th rowspan = "3" style = "vertical-align: middle;">Meal Allow</th>
                                        <th rowspan = "3" style = "vertical-align: middle;">Boss</th>
                                    </tr>
                                    <tr>
                                        <th colspan = "2">() rarbk & file ()</th>
                                    </tr>
                                    <tr>a
                                        <th style = "max-width: 40px">From</th>
                                        <th style = "max-width: 40px">To</th>
                                    </tr>
                                    <tr>
                                        <td colspan = "2">December</th>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td style = "width:10%" class = "first-period">1</td>
                                        <td style = "width: 10%" class = "second-period">16</td>
                                        <td class = "timepicker_from" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "timepicker_from" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "pot" style = "width: 250px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "pot" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input class = "meal_allow" value = "0" type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "pot" style = "width: 200px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class = "first-period">2</th>
                                        <td class = "second-period">17</td>
                                        <td class = "timepicker_from" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "timepicker_from" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "pot" style = "width: 250px; table-layout: fixed; padding: 0">
                                            <input type = "textarea" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "ot" style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td style = "width: 100px; table-layout: fixed; padding: 0">
                                            <input class = "meal_allow" value = "0" type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                        <td class = "boss" style = "width: 200px; table-layout: fixed; padding: 0">
                                            <input type = "text" style = "width: 100%; height: 50px;">
                                        </td>
                                    </tr>


                                    <tr>
                                        <td class = "total"><b>TOTAL</b></th>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td id = "total"></td>
                                        <td></td>
                                    </tr>
                                </table>
                                <div style = "margin-top: 15px" class = "footer">
                                    <p>Note: Pls Encircle corresponding meal allowance and always indicate covered pay period.</p>
                                </div>

                            </div>
                        </div>
                  </div>
            </div>
  <input type = "text" id = "inputMultiDate" class = "form-control" placeholder = "Pick the multiple dates">
  <script src = "//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с различными форматами данных, такими как JSON и XML.


63
2

Ответы:

По умолчанию большинство (афаик) браузеров отключают фон при печати html. В хроме после нажатия кнопки и появления диалога печати нажмите "дополнительные настройки" -> "фоновая графика"


Добавьте правило @media в файл CSS.

@media print {
  .print-para {
     background-color: #ff0000;
  }
}

добавить этот класс при печати нажатием кнопки

$('#btnChange').click(function() {
  $('body').addClass('print-para');
  window.print();
});

Включите фоновое отображение в настройках предварительного просмотра в браузере.

Print Preview > More Settings > Background Graphics