如何使用 CSS 只列印特定的 HTML 元素？

如何只列印特定的 HTML 元素

只列印特定 HTML 元素（例如 div）的任務經常出現在網路開發中。然而，在不禁用其他頁面內容可見性的情況下實現這一目標可能具有挑戰性。

為了解決此問題，有一個 CSS 解決方案，可讓您列印所需的元素，同時隱藏頁面的其餘部分。透過實現以下程式碼，您可以指定在列印期間整個頁面變得不可見，除了您要列印的div：

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

在此程式碼中，為您要列印的div 分配了ID 「要列印的部分」。當瀏覽器進入列印模式（由使用者的列印命令觸發）時，指定的 @media 規則將變為活動狀態。

該規則將 body 標籤的可見性屬性設為“隱藏”，渲染所有頁面元素無形的。但是，ID 為「section-to-print」的 div 的可見性被明確地設定為「可見」。

此外，為了確保正確列印，div 被絕對定位並放置在左上角頁面的。這可以確保它在列印過程中出現在所需的位置。

使用此方法，您可以選擇性地列印特定的 div，而不需要額外的對話方塊或操作頁面的結構。它為需要列印特定 HTML 元素的情況提供了一個乾淨有效的解決方案。

以上是如何使用 CSS 只列印特定的 HTML 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！