Как объединить два класса или распечатать класс из DOM

Question

У меня есть DOM с классом в нем .printableArea.На странице есть несколько элементов с одним и тем же классом, но они содержат разную информацию.Что мне нужно сделать, это распечатать содержимое этого класса, чтобы объединить его в одну печатную страницу.Кроме того, я могу переименовать div с уникальными идентификаторами (например, # printableArea1 и # printableArea2) и распечатать их содержимое.Под принтом я подразумеваю на самом деле печать на принтере.

Кто-нибудь может пролить свет на печать содержимого классов или двух или более идентификаторов вместе?

Мне понадобится какой-нибудь конкат?

\\This is the original that loads the contents of the first .printableArea. 
\\Changing the code to [1] instead of [0] gives the contents of the second .printableArea 

<input type="button" align="centre" onclick="printDiv('printableArea')" 
value="Print Page" />
<script>
function printDiv(divName) {
 var printContents = document.getElementsByClassName(divName) 
 [0].innerHTML;
 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;

 window.print();

 document.body.innerHTML = originalContents;
 }
 </script>

\\This also yields a result if I change to using an id instead of class.

<input type="button" align="centre" onclick="printDiv('printableArea')" 
value="Print Page" />
<script>
function printDiv(divName) {
 var printContents = document.getElementById(divName).innerHTML;
 var originalContents = document.body.innerHTML;

 document.body.innerHTML = printContents;

 window.print();

 document.body.innerHTML = originalContents;
}
</script>

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

Answer 1

getElementsByClassName возвращает массив всех элементов, соответствующих селектору. Вы выбираете только один элемент массива с [0]. Решение состоит в том, чтобы перебрать массив и добавить каждый элемент внешнего HTML в переменную, а затем заменить тело документа этой переменной.

Я использую externalHTML вместо inner, потому что он включает в себя сам элемент, а не только потомки.

function printDiv(divName) {
 var originalContents = document.body.outerHTML;
 
 // Initially set printContents to an empty string
 var printContents = '';
 
 // Get all the printable area elements
 var printableAreaEls = document.getElementsByClassName(divName);
 
 // Turn this into an array
 var printableAreaElsArray = Array.from(printableAreaEls);
 
 // Iterate over the array and add each elements outerHTML to the printContent variable (this is where the magic happens)
 printableAreaElsArray.forEach(function (printSegment) {
  printContents += '<br>' + printSegment.outerHTML;
 })

 document.body.outerHTML = printContents;
 window.print();
 document.body.outerHTML = originalContents;
}

<div class="printableArea">Print this</div>
<div>But dont print this</div>
<div class="printableArea"><span>Also print this</span></div>
<button onclick="printDiv('printableArea')">Print</button>

Answer 2

Можно применять стили «Только для печати», то есть стили страницы CSS, которые применяются только при печати страницы.

Этого можно достичь, добавив стили только для печати в следующий селектор носителей:

@media print {
  /* print-only styles here */
}

Что вы можете сделать, это скрыть все элементы, которые не имеют класса .printableArea.

@media print {
  body :not(.printableArea) {
    display: none !important;
  }
}

Но это на самом деле скроет потомков класса .printableArea, а не идеал. Мы можем выбрать этих потомков по отдельности и сбросить их свойство display к их начальному значению.

@media print {
  body :not(.printableArea) {
    display: none !important;
  }

  body .printableArea * {
    display: initial !important;
  }
}

Это означает, что вы можете полностью удалить свой JavaScript и изменить кнопку печати на:

<input type="button" align="centre" onclick="window.print()" 
value="Print Page"/>

Интерактивный пример

@media print {
  body :not(.printableArea) {
    display: none !important;
  }

  body .printableArea * {
    display: initial !important;
  }
}

<div class="printableArea">Print this</div>
<div>But dont print this</div>
<div class="printableArea"><span>Also print this</span></div>
<button onclick="window.print()">Print</button>