如何使用CSS僅列印網頁上的特定div？

在網頁上列印特定內容

僅列印網頁上的特定div 而不影響其他內容可能是一項具有挑戰性的任務。為了解決這個問題，以下介紹了一個利用CSS 的有效方法：

CSS 解決方案：

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

說明：

說明：

1. 此CSS 程式碼使用@media 列印規則將樣式專門套用於列印預覽。它的工作原理是：
3. 透過將其可見性設為隱藏來隱藏頁面的整個主體（要列印的 div 除外）。

設定目標 div 的可見性 ( #section-to-print) 可見。

將目標 div 絕對定位在頁面的左上角（左：0；上：0；）確保它正確列印。

替代方法：

雖然使用顯示來隱藏內容似乎是一個選項，但它可能具有挑戰性，因為任何隱藏的元素display:none也會隱藏其後代。這可能需要大量的頁面重組。

此解決方案的優點：

• 此純CSS 解決方案：
• 允許您選擇性地列印僅所需的div ，而不禁用其他頁面元素。

避免建立新窗口，確保無縫的列印體驗。 保留用於列印的目標 div 的視覺樣式，即使套用的樣式用於 Web 顯示。

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