时间戳

首页 > 解决方案 > 如何加入两个类或从 DOM 打印一个类

javascript - 如何加入两个类或从 DOM 打印一个类

问题描述

我有一个 DOM，其中有一个类 .printableArea。页面上有几个 div 具有相同的类，但它们包含不同的信息。我需要做的是打印这个类的内容，让它将这些内容组合成一个打印页面。或者，我可以用唯一的 id 重命名 div（例如，#printableArea1 和 #printableArea2）并打印它们的内容。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 的内容打印在一个页面上。

标签： javascriptjoinprinting

解决方案

可以应用仅打印样式，即仅在您打印页面时应用的 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>

推荐阅读