Как использовать запросы на печать @media с динамической веб-страницей?Все, что я получаю, это пустая страница в настоящее время - PullRequest
Новая
       15

Как использовать запросы на печать @media с динамической веб-страницей?Все, что я получаю, это пустая страница в настоящее время

0 голосов
/ 18 апреля 2019

У меня есть динамическая веб-страница, которая создается, когда пользователь нажимает, чтобы просмотреть более подробную информацию об автомобиле. В основном мне нужна кнопка с надписью «Print Details», чтобы покупатель мог распечатать информацию об автомобиле, но я не хочу, чтобы она печатала верхний и нижний колонтитулы только по центру. Таким образом, в настоящее время у меня есть (без вставки всего моего кода) div с моим заголовком и div с моим нижним колонтитулом. Затем у меня есть тег раздела, использующий класс «section white». Когда пользователь нажимает «Печать», я хочу напечатать ПРОСТО тег раздела и все, что внутри него. Однако в настоящее время, когда я попробовал это, я просто получаю пустую страницу ..

Это код, который я сейчас использую, чтобы попытаться это сделать. 

    <style type="text/css">
        @media print { 
            body * { 
                visibility: hidden !important;
            } 

            .section .white { 
                visibility: visible !important;
                height: 100%; 
                width: 100%; 
                position: fixed; 
                background-color: blue;
                top: 0; 
                left: 0; 
                margin: 0; 
                padding: 15px; 
                font-size: 14px; 
                line-height: 18px; 
                z-index: 9999999;
            } 
        }
    </style>

Я не буду вставлять свою HTML-страницу только потому, что в ней много кода, но структура выглядит следующим образом. 

<html>
 <body>
  <div class="header">
  </div>
  <section class="section white">
  </section>
  <div class="footer">
  </div>
 </body>
</html>

1 Ответ

0 голосов
/ 18 апреля 2019 
body * { 
    visibility: hidden !important;
}

Это скрывает все внутри тела. 

.section .white { 
     visibility: visible !important;
}

Это что-то скрывает с class="white", что является потомком чего-то с class="section".

Вы не выбираете раздел 

<section class="section white">

Единственный элемент с class="white" - это такой же элемент, который имеет class="section". Это не его потомок.

Снять потомок комбинатора: 

.section.white {}

У вас нет материала для печати 

<section class="section white">
</section>

Там ничего не видно. Вы должны иметь некоторый контент, чтобы он появился!

Если у вас есть контент, то все элементы все равно будут скрыты

body * совпадет с ними и скроет их.

Просто скройте элементы, которые вам нужны, и ничего больше. Используйте селекторы, которые действительно соответствуют им.

Напишите семантическую разметку, пока вы на ней. Не используйте классы, которые соответствуют типам элементов, либо используйте лучшие имена классов или фактические типы элементов.

Избегайте !important, это почти всегда больше проблем, чем стоит. 

body > :not(section):not(.white) {
    visibility: hidden;
}
<header>
  This is the header
</header>
<section class="white">
  <p>This is a section</p>
  <p>...</p>
</section>
<footer>
  This is the footer
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...