当前位置：首页 > JavaScript

js实现web打印

2026-03-01 09:44:47JavaScript

使用window.print()实现简单打印

调用window.print()方法会直接触发浏览器的打印对话框，打印当前页面内容。适合打印整个页面或简单内容。

document.getElementById('printBtn').addEventListener('click', () => {
  window.print();
});

打印特定区域内容

通过CSS控制仅打印页面中的指定区域，隐藏其他部分：

js实现web打印

function printDiv(divId) {
  const printContents = document.getElementById(divId).innerHTML;
  const originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents; // 恢复原内容
}

配套CSS示例：

@media print {
  body * {
    visibility: hidden;
  }
  #printArea, #printArea * {
    visibility: visible;
  }
  #printArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}

使用打印样式表优化输出

通过@media print定义打印时的专属样式，例如隐藏导航栏、调整字体大小：

js实现web打印

@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
}

使用iframe打印外部内容

动态创建iframe加载需要打印的内容，适用于打印远程或动态生成的内容：

function printExternal(url) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = url;
  document.body.appendChild(iframe);
  iframe.onload = () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
  };
}

打印PDF文件（浏览器兼容方案）

通过<embed>标签触发PDF打印（需浏览器支持）：

function printPDF(pdfUrl) {
  const embed = document.createElement('embed');
  embed.src = pdfUrl;
  embed.type = 'application/pdf';
  embed.style.display = 'none';
  document.body.appendChild(embed);
  embed.onload = () => {
    embed.focus();
    embed.print();
  };
}