JavaScript如何实现打印指定区域或特定文本内容的功能？

原生window.print()方法本身没有接收内容参数的设计，默认行为就是打印整个页面，你之前传入内容的写法不会生效，该需求完全可实现，常用有三种方案：

方案1：临时替换页面内容（简单场景适用） #

直接把页面内容临时替换为需要打印的内容，打印完成后恢复原有内容，适合页面事件绑定较少的简单页面：

function printSpecificArea(printAreaId) {
  const originalBody = document.body.innerHTML;
  const printContent = document.getElementById(printAreaId).innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalBody;
}
// 调用示例，传入要打印的容器id
printSpecificArea('my-print-content');

注意：该方案会清除页面原有DOM绑定的所有事件，复杂页面不推荐使用。

方案2：CSS打印媒体查询（最常用推荐） #

通过@media print媒体查询控制打印时的元素显隐，完全不影响原页面的逻辑和事件绑定：

@media print {
  /* 给不需要打印的元素添加该类即可隐藏 */
  .hide-when-print {
    display: none !important;
  }
  /* 自定义打印内容的样式 */
  .print-content {
    font-size: 14px;
    line-height: 1.5;
    color: #000;
  }
}

需要触发打印时直接调用window.print()即可，浏览器会自动应用打印样式仅展示你需要的内容。

方案3：隐藏iframe打印（完全不影响当前页面） #

创建隐藏的iframe加载要打印的内容，打印完成后自动销毁，适合需要打印的内容和当前页面差异较大的场景：

function printCustomContent(content) {
  const printIframe = document.createElement('iframe');
  // 隐藏iframe
  printIframe.style.cssText = 'position:absolute;width:0;height:0;border:0;left:-9999px;top:-9999px';
  document.body.appendChild(printIframe);
  
  const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;
  // 写入打印内容，可自定义引入样式
  iframeDoc.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <style>
        /* 在这里自定义打印样式 */
        body { margin: 20px; }
      </style>
    </head>
    <body>${content}</body>
    </html>
  `);
  iframeDoc.close();
  
  printIframe.contentWindow.focus();
  // 确保内容加载完成后打印
  printIframe.contentWindow.onload = () => {
    printIframe.contentWindow.print();
    document.body.removeChild(printIframe);
  };
}
// 调用示例，直接传入要打印的HTML内容
printCustomContent('<p>MYTEXT 你要打印的指定内容</p>');

注意：如果打印内容包含图片、字体等外部资源，需要额外添加资源加载完成的判断逻辑，避免出现内容缺失的问题。

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