如何在按一下按鈕時僅列印選定的 HTML 內容？

點擊按鈕時選擇性地列印HTML 內容

Web 開發人員經常遇到需要允許使用者列印網頁的特定部分而不包括整個頁面內容。在這種情況下，問題就出現了：

如何在單擊按鈕時僅列印選定的 HTML 內容，而不包括頁面的其餘部分？

解決方案：

將隱藏的 HTML 內容保留在顯示中的建議解決方案： print div 是一種有效的方法。然而，有一個更簡單、更有效的方法：

建立列印樣式表：

1. 建立一個名為「print.css」的CSS 文件，其中包含以下內容代碼：

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

此程式碼將在列印頁面時隱藏類別為「noPrint」的元素。

2. 應用NoPrint 類別：

辨識不應該列印的HTML 內容，並為這些元素添加類別“noPrint”，例如：

<code class="html"><h1 class="noPrint">No Print</h1></code>

3. 包含列印樣式表：

將以下行加入

中HTML 文件的部分：

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>

4. 新增列印按鈕：

建立一個點擊時觸發列印對話框的按鈕：

<code class="html"><button onclick="window.print()">Print</button></code>

說明：

點選列印按鈕時，將呼叫window.print() 方法，開啟瀏覽器的列印對話方塊。 CSS 媒體查詢 @media print { ... } 被觸發，導致類別「noPrint」的元素被隱藏。結果，僅列印所需的 HTML 內容。

以上是如何在按一下按鈕時僅列印選定的 HTML 內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！