如何在單擊按鈕時列印特定的 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中文網其他相關文章！