在按钮单击时打印特定的 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，从而提供更加用户友好的打印体验。