如何使用 CSS 媒體查詢僅列印特定 Div？

使用CSS 媒體查詢列印特定內容

僅列印網頁上特定div 的請求在嘗試保留時提出了挑戰它的外觀並排除不需要的元素。使用 CSS 媒體查詢可以有效解決此問題。

以下CSS 程式碼片段提供了一個解決方案，讓您在不影響頁面上其他內容的情況下列印指定的div：

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

在此CSS 程式碼中：

• @media print {} 區塊定義特定於列印的樣式。
• body 元素是分配的可見性：隱藏以隱藏頁面上的所有其他元素。
• #section-to-print div（包含所需的內容）已指派可見性：可見以確保其在列印中的外觀。
• position:absolute 以及 left:0 和 top:0 確保 div 正確定位在可列印區域。

透過使用此方法，您可以列印所需的 div，而不觸發新的列印預覽對話框或更改原始頁面佈局。

以上是如何使用 CSS 媒體查詢僅列印特定 Div？的詳細內容。更多資訊請關注PHP中文網其他相關文章！