当前位置：首页 > JavaScript

js实现打印

2026-04-03 18:02:04JavaScript

使用 window.print() 方法打印当前页面

window.print() 是 JavaScript 中最简单的打印方法，会直接调用浏览器的打印功能。

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

打印特定区域内容

若只需打印页面某部分内容，可通过 CSS 隐藏其他区域。

js实现打印

<style>
@media print {
  body * {
    visibility: hidden;
  }
  #print-section, #print-section * {
    visibility: visible;
  }
  #print-section {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

<button onclick="printDiv('print-section')">打印区域</button>
<div id="print-section">要打印的内容</div>

<script>
function printDiv(divId) {
  window.print();
}
</script>

使用打印样式表优化打印效果

创建专门的打印样式表确保打印布局合理。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

打印新窗口内容

打开新窗口并打印其内容，不影响当前页面。

js实现打印

function printNewWindow(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.focus();
  printWindow.print();
  printWindow.close();
}

打印前/后事件处理

通过 window.onbeforeprint 和 window.onafterprint 添加打印前后逻辑。

window.onbeforeprint = function() {
  console.log('即将打印');
};

window.onafterprint = function() {
  console.log('打印完成');
};

打印 PDF 文件

使用浏览器内置 PDF 查看器打印 PDF 文件。

function printPDF(pdfUrl) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = pdfUrl;
  document.body.appendChild(iframe);
  iframe.onload = function() {
    iframe.contentWindow.print();
  };
}