如何在单击按钮时仅打印选定的 HTML 内容？

单击按钮时有选择地打印 HTML 内容

Web 开发人员经常遇到需要允许用户打印网页的特定部分而不包括整个页面内容。在这种情况下，问题就出现了：

如何在单击按钮时仅打印选定的 HTML 内容，而不包括页面的其余部分？

解决方案：

将隐藏的 HTML 内容保留在显示中的建议解决方案： print div 是一种有效的方法。然而，有一个更简单、更有效的方法：

创建打印样式表：

1. 创建一个名为“print.css”的 CSS 文件，其中包含以下内容代码：

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

此代码将在打印页面时隐藏类为“noPrint”的元素。

2. 应用 NoPrint 类：

识别不应该打印的 HTML 内容，并为这些元素添加类“noPrint”，例如：

<code class="html">&lt;h1 class=&quot;noPrint&quot;&gt;No Print&lt;/h1&gt;</code>

3. 包含打印样式表：

将以下行添加到

中HTML 文档的部分：

<code class="html">&lt;link rel=&quot;stylesheet&quot; href=&quot;print.css&quot; media=&quot;print&quot;&gt;</code>

4. 添加打印按钮：

创建一个单击时触发打印对话框的按钮：

<code class="html">&lt;button onclick=&quot;window.print()&quot;&gt;Print&lt;/button&gt;</code>

说明：

单击打印按钮时，将调用 window.print() 方法，打开浏览器的打印对话框。 CSS 媒体查询 @media print { ... } 被触发，导致类“noPrint”的元素被隐藏。结果，仅打印所需的 HTML 内容。

以上是如何在单击按钮时仅打印选定的 HTML 内容？的详细内容。更多信息请关注PHP中文网其他相关文章！