当前位置：首页 > JavaScript

js实现打印页面

2026-01-30 11:12:56JavaScript

使用window.print()方法

调用window.print()可以直接触发浏览器的打印功能，弹出打印对话框。这是最简单的实现方式，适用于纯打印当前页面内容。

function printPage() {
  window.print();
}

打印指定区域内容

通过CSS控制仅打印页面特定部分，隐藏其他无关元素。在CSS中定义@media print规则，结合display: none隐藏非目标区域。

js实现打印页面

<style>
  @media print {
    body * {
      display: none;
    }
    .print-area, .print-area * {
      display: block;
    }
  }
</style>

<div class="print-area">仅打印此部分内容</div>
<button onclick="window.print()">打印</button>

动态生成打印内容

使用JavaScript创建隐藏的iframe或新窗口，将自定义内容注入后打印，避免影响原页面布局。

js实现打印页面

function printCustomContent(content) {
  const printWindow = window.open('', '_blank');
  printWindow.document.write('<html><head><title>打印</title></head><body>');
  printWindow.document.write(content);
  printWindow.document.write('</body></html>');
  printWindow.document.close();
  printWindow.print();
}

打印样式优化

通过CSS调整打印页面的边距、字体和分页效果，提升打印输出的可读性。

@media print {
  @page {
    size: A4;
    margin: 1cm;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  .page-break {
    page-break-after: always;
  }
}

处理打印事件

监听beforeprint和afterprint事件，在打印前后执行特定逻辑（如临时修改DOM）。

window.addEventListener('beforeprint', () => {
  document.body.style.backgroundColor = 'white';
});

window.addEventListener('afterprint', () => {
  document.body.style.backgroundColor = '';
});