如何通过单击按钮打印 HTML 内容而不是页面？ [复制]

我想在用户单击按钮时打印一些 HTML 内容。一旦用户单击该按钮，浏览器的打印对话框将打开，但不会打印网页。相反，它会打印页面上未显示的其他一些 HTML 内容。

在问这个问题时，我脑子里几乎没有解决方案。但我不确定这些是好主意还是可以做更好的事情。这些解决方案之一是： 我可以将此 HTML 内容保存在 div 中并使其display:打印，但是display: none向屏幕。网页上的所有其他元素都可以display: none用于打印和display:对于屏幕。然后调用打印。

还有更好的主意吗？

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

我遇到了另一个优雅的解决方案：

将可打印部分放入具有如下 id 的 div 中：

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

现在让我们创建一个非常简单的 JavaScript：

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

来源 ：所以答案