如何实现仅打印当前窗口而非整个屏幕？附现有打印按钮代码

我来给你两种可行的方案，结合你现有的打印按钮代码做调整，轻松实现只打印当前窗口内容的需求：

方案一：使用CSS媒体查询精准控制打印范围 #

这是最简洁的方案，通过CSS的@media print规则，在打印时自动隐藏非目标内容，只保留你需要打印的窗口区域。

步骤1：添加打印专属CSS #

在你的页面样式里添加以下代码（记得把#printable-content替换成你当前窗口内容所在的容器ID）：

@media print {
  /* 隐藏页面所有内容 */
  body * {
    visibility: hidden;
  }
  /* 仅显示目标窗口容器及其子元素 */
  #printable-content, #printable-content * {
    visibility: visible;
  }
  /* 确保打印内容占满纸张宽度 */
  #printable-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  /* 强制隐藏打印和关闭按钮（也可以保留JS里的隐藏逻辑，双重保险） */
  #print, #close {
    display: none !important;
  }
}

步骤2：调整你的JavaScript函数 #

可以保留你原有的按钮隐藏/恢复逻辑，确保打印前后按钮状态正常：

function printpage() {
  // 获取按钮元素
  const printButton = document.getElementById("print");
  const closeButton = document.getElementById("close");
  
  // 打印前隐藏按钮
  printButton.style.visibility = 'hidden';
  closeButton.style.visibility = 'hidden';
  
  // 触发打印（此时CSS会自动控制显示内容）
  window.print();
  
  // 打印完成后恢复按钮显示
  printButton.style.visibility = 'visible';
  closeButton.style.visibility = 'visible';
}

方案优势：无需额外窗口操作，依赖浏览器原生打印机制，兼容性好，代码改动小。

方案二：提取内容到新窗口打印（完全隔离） #

如果你需要完全隔离原页面的样式或内容，避免干扰，可以把目标窗口内容复制到新窗口，再在新窗口触发打印。

调整后的JavaScript函数 #

function printpage() {
  const printButton = document.getElementById("print");
  const closeButton = document.getElementById("close");
  
  // 隐藏当前页面的按钮
  printButton.style.visibility = 'hidden';
  closeButton.style.visibility = 'hidden';
  
  // 获取要打印的窗口内容（替换成你实际的容器ID）
  const printableContent = document.getElementById("printable-content").innerHTML;
  
  // 创建新打印窗口
  const printWindow = window.open('', '_blank', 'width=800,height=600');
  
  // 向新窗口写入内容和样式
  printWindow.document.write(`
    <html>
      <head>
        <title>当前窗口打印内容</title>
        <style>
          /* 这里可以自定义打印样式，比如字体、边距等 */
          body { 
            font-family: Arial, sans-serif;
            padding: 20px;
          }
        </style>
      </head>
      <body>
        ${printableContent}
      </body>
    </html>
  `);
  
  // 关闭文档流，确保内容加载完成
  printWindow.document.close();
  
  // 新窗口加载完成后触发打印，打印后可自动关闭窗口
  printWindow.onload = function() {
    printWindow.print();
    printWindow.close(); // 可选：打印后关闭新窗口
  };
  
  // 恢复当前页面的按钮显示
  printButton.style.visibility = 'visible';
  closeButton.style.visibility = 'visible';
}

方案优势：完全隔离原页面的样式和其他内容，打印内容更纯净；但需要注意浏览器可能会阻止弹出新窗口（不过你的按钮是用户主动点击触发，一般不会被拦截）。

注意：两种方案都需要确保你要打印的窗口内容被包裹在一个单独的容器里（比如div#printable-content），这样才能精准定位要打印的区域。

内容的提问来源于stack exchange，提问作者Str1fe