互动示例

Question

我有一个带有.printableArea类的DOM。页面上有多个具有相同类的div，但是它们具有不同的信息。我需要做的是打印此类的内容，以使其将内容组合到单个打印页面中。另外，我可以使用唯一的ID（例如，＃printableArea1和＃printableArea2）重命名div，然后打印其中的内容。 priny，我的意思是实际上是打印到打印机。

有人可以一起打印类或两个或多个id的内容吗？

我需要某种连合吗？

\\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>

预期结果是将同一类的所有内容打印到一页上，或者将不同id的内容打印到一页上。

Answer 1

可以应用仅打印样式，即仅在打印页面时适用的CSS页面样式。

这可以通过将仅打印样式包装在以下介质选择器中来实现：

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

您可以做的是隐藏所有没有.printableArea类的元素。

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

但这实际上将隐藏.printableArea类的后代，而不是理想的。我们可以分别选择这些后代，并将其显示属性重置为其初始值。

@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>

Answer 2

getElementsByClassName返回与选择器匹配的所有元素的数组。您仅使用[0]选择数组的单个元素。解决方案是遍历数组并将HTML外部的每个元素添加到变量中，然后用该变量替换文档主体。

我使用外部HTML代替内部HTML，因为它包括实际元素本身，而不仅仅是子元素。

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>

如何加入两个班级或从DOM打印班级

2 个答案:

互动示例