如何打印特定的HTML内容而不影响页面的显示？

打印特定的 HTML 内容而不影响页面显示

在 Web 开发中，你可能会遇到这样的场景：点击按钮时需要打印特定的 HTML 内容，而不影响页面显示扰乱页面的当前显示。存在多种解决方案，包括您提到的解决方案：将内容放置在隐藏的 div 中。

但是，可以使用 CSS 媒体查询实现更有效的方法：

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

这里，一个名为“noPrint”的类应用于不应打印的元素。当打印对话框打开时，将应用 @media 打印块中定义的样式，隐藏这些元素，同时保持网页的原始外观。

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

在此代码中，“打印我”标题将被打印，而具有“noPrint”类的元素将被隐藏。此方法可以提供更大的灵活性和对打印输出的控制，确保仅将预期内容发送到打印机。

以上是如何打印特定的HTML内容而不影响页面的显示？的详细内容。更多信息请关注PHP中文网其他相关文章！