在按鈕點擊時列印特定的HTML 內容而不包括完整網頁

在使用者點擊按鈕時僅列印特定的HTML內容可以透過多種方式實現方式。一種方法是建立一個隱藏的 div 元素來保存所需的 HTML。為了列印目的，該 div 的顯示屬性應設定為“print”，而為了螢幕顯示，其顯示值應保持“none”。頁面上的其他元素可以將其顯示屬性調整為在螢幕上顯示，但在列印期間隱藏。然而，這種方法需要對所有頁面元素的顯示屬性進行細緻的管理。

另一種方法是建立一個新的、獨立的網頁，僅包含要列印的 HTML 內容。當使用者點擊列印按鈕時，這個新頁面可以動態載入到隱藏的 iframe 中。一旦 iframe 完全加載，就可以觸發瀏覽器的列印功能，並且將列印嵌入的 HTML，而不會包含任何不需要的頁面元素。此方法為列印過程提供了更大的靈活性和動態控制。

這是使用第二種方法的範例：

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

此解決方案可讓您在按一下按鈕時輕鬆列印特定的 HTML 內容，而無需修改主網頁的外觀或內容。它確保僅列印預期的 HTML，從而提供更用戶友好的列印體驗。