如何在单击按钮时打印特定的 HTML 元素而不打印整个页面？

单击按钮时打印 HTML 元素而不打印页面

在此场景中，您寻求一种打印由按钮触发的 HTML 内容的方法单击而不在打印输出中捕获整个网页。请考虑以下解决方案：

CSS 打印媒体规则

使用 CSS 打印媒体规则，您可以有选择地显示仅用于打印目的的内容。实现方法如下：

<code class="css">/* CSS file */

@media print {
  /* Hide any element you don't want to print */
  .noPrint {
    display: none;
  }

  /* Set elements you want to print to display */
  h1 {
    color: #f6f6;
  }
}

/* Elements in the HTML page */

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

说明

• @media 打印规则定义特定于打印介质的样式。
• 具有 noPrint 类的元素将在打印时隐藏（使用 display: none）。

• 包含要打印内容的元素被设置为显示在打印介质中，并具有独特的颜色。

• 单击“打印我”按钮时，将调用 window.print() 来打印修改后的页面，现在仅包含所需的元素。

优点

• 避免打印不需要的内容。
• 保持干净整洁打印输出。
• 允许灵活的内容控制，确保只打印相关信息。

以上是如何在单击按钮时打印特定的 HTML 元素而不打印整个页面？的详细内容。更多信息请关注PHP中文网其他相关文章！