如何列印特定的HTML內容而不影響頁面的顯示？

列印特定的HTML 內容而不影響頁面顯示

在Web 開發中，你可能會遇到這樣的場景：點擊按鈕時需要列印特定的HTML內容，而不影響頁面顯示擾亂頁面的目前顯示。有多種解決方案，包括您提到的解決方案：將內容放置在隱藏的 div 中。

但是，可以使用 CSS 媒體查詢實現更有效的方法：

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

這裡，一個名為「noPrint」的類別應用於不應列印的元素。當列印對話方塊開啟時，將套用 @media 列印區塊中定義的樣式，隱藏這些元素，同時保持網頁的原始外觀。

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

在此程式碼中，「列印我」標題將被列印，而具有「noPrint」類別的元素將被隱藏。此方法可提供更大的靈活性和對列印輸出的控制，確保僅將預期內容傳送到印表機。

以上是如何列印特定的HTML內容而不影響頁面的顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！