js如何实现打印指定的区域（局部打印）？

在前端开发中，JavaScript 可以通过几种方式实现指定区域（局部打印）：

1. 使用 window.print() 和 CSS 媒体查询 @media print:

这是最常见和最简单的方法。核心思想是使用 CSS 隐藏不想打印的内容，只显示需要打印的部分。

<!DOCTYPE html>
<html>
<head>
<title>局部打印</title>
<style>
@media print {
  body * {
    visibility: hidden; /* 隐藏所有元素 */
  }
  #print-area, #print-area * {
    visibility: visible; /* 显示打印区域及其子元素 */
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
</head>
<body>

<div id="print-area">
  <h1>要打印的内容</h1>
  <p>这是一段需要打印的文字。</p>
  <img src="image.jpg" alt="图片">
</div>

<div id="no-print-area">
  <button onclick="window.print()">打印</button>
  <p>这部分不会被打印。</p>
</div>

</body>
</html>

在这个例子中，@media print 样式表只在打印时生效。它首先隐藏了所有元素，然后将 #print-area 及其子元素设置为可见。 position: absolute; left: 0; top: 0; 确保打印区域位于页面左上角。

2. 创建新的打印窗口并写入内容:

这种方法更灵活，可以对打印内容进行更精细的控制。

function printSpecificArea(elementId) {
  const printContent = document.getElementById(elementId).innerHTML;
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head>
        <title>打印</title>
      </head>
      <body>
        ${printContent}
      </body>
    </html>
  `);
  printWindow.document.close();
  printWindow.print();
  printWindow.close(); // 可选：打印后关闭窗口
}

// 调用函数打印 id 为 "print-area" 的元素
printSpecificArea('print-area');

此方法创建一个新的空白窗口，并将要打印的内容写入该窗口的文档。然后调用 print() 方法打印新窗口的内容。

3. 使用 iframe:

与第二种方法类似，可以使用 iframe 来加载要打印的内容，然后打印 iframe。

<iframe id="print-frame" style="display: none;"></iframe>
<button onclick="printIframe()">打印</button>

<script>
function printIframe() {
  const iframe = document.getElementById('print-frame');
  iframe.contentDocument.body.innerHTML = document.getElementById('print-area').innerHTML;
  iframe.contentWindow.print();
}
</script>