CSS Запрос печатных носителей для удаления пустого пространства - PullRequest
Новая
       12

CSS Запрос печатных носителей для удаления пустого пространства

0 голосов
/ 14 января 2020

Спасибо за помощь! Я пытаюсь напечатать указанный c div, используя CSS Медиа-запросы. При нажатии на печать, в зависимости от того, какой div они нажимают, я хочу скрыть все остальные элементы, кроме тела div, на которое они нажимают.

Все работает хорошо, за исключением случаев, когда я go печатаю, элементы находятся там, где они были бы изначально, я полагаю, из-за свойства 'hidden' ... другие div не являются на самом деле ушел. Я не могу использовать свойство display: none, потому что оно портит динамически генерируемые элементы.

Любые предложения о том, как заставить выбранные элементы печатать спереди и по центру на первой странице, были бы полезны!

Вот мой CSS для печати 

  <style>
        /*CSS FOR HIDING ALL ELEMENTS EXCEPT THE PRINTED ONE*/
        @media print {
            /*set all HTML elements to hidden*/
            body * {
                visibility: hidden;
            }
            /*CSS classes to set chosen elements and all their children to visible*/
            .section-to-print-head, .section-to-print-body, .section-to-print-head *, .section-to-print-body * {
                visibility: visible;
                display: block;

            }
            /*POSITIONING OF HEAD*/
            .section-to-print-head {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                page-break-after: avoid;
                display: block;
            }

            /*POSITIONING OF BODY*/
            .section-to-print-body {
                position: absolute;
                left: 5;
                top: 0;
                width: 100%;
                z-index: 100;
            }
            .section-to-print-body:last-child {
              page-break-after: avoid;
            }
        }
    </style>

Вот HTML с кнопкой и функцией onclick 

    <div class="row infoAreaToPrint">
            <div class="col-lg-5">
                <div class="card">
                    <div class="card-body">
                       <p class="h4 border-bottom mb-0">
                             Customer: <?php echo $custName ?></p>
                              <span>
                                 <button                                                          
                                  onclick="printThisTableDiv('.infoAreaToPrint')">Print Info
                                  </button>
                              </span>

Вот функция, которую я вызываю, чтобы скрыть все элементы, кроме того, что я хочу напечатать 

    function printThisTableDiv(tableID) {
        let existingTags = document.querySelectorAll('.section-to-print-body');
        let i;
        for (i = 0; i < existingTags.length; i++) {
            existingTags[i].classList.remove('section-to-print-body');
        }
        document.querySelector(tableID).classList.add("section-to-print-body");
        window.print();
    };

1 Ответ

0 голосов
/ 15 января 2020

Разобрался только с обновлением CSS запроса 

   @media print {

            html, body {
                height:100%;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden;
            }

            /*set all HTML elements to hidden*/
            body * {
                visibility: hidden;
                height: auto;
            }

            /*CSS classes to set chosen elements and all their children to visible*/
            .section-to-print-head, .section-to-print-body, .section-to-print-head *, .section-to-print-body * {
                visibility: visible;
                page-break-after: avoid;
            }

            /*POSITIONING OF HEAD*/
            .section-to-print-head {
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
            }

            /*POSITIONING OF BODY*/
            .section-to-print-body {
                position: fixed;
                top: 50px;
                left: 0;
                z-index: 999;
                width: 100%;
            }

            .section-to-print-body ~ * {
                z-index: 0;
                display: none;
            }
        }
...