当前位置：首页 > JavaScript

js实现精准打印

2026-02-03 00:22:31JavaScript

使用CSS控制打印样式

在HTML中引入打印专用的CSS文件，或使用@media print媒体查询定义打印时的样式。隐藏非必要元素（如导航栏、按钮），调整字体、边距确保内容适配纸张。

<style>
@media print {
  .no-print { display: none; }
  body { font-size: 12pt; margin: 0; }
  img { max-width: 100% !important; }
}
</style>

调用浏览器打印API

通过window.print()直接触发浏览器打印对话框。可配合beforeprint和afterprint事件监听器进行打印前后的处理。

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

window.addEventListener('beforeprint', () => {
  console.log('准备打印');
});

生成PDF打印

使用库如jsPDF或html2pdf.js将内容转换为PDF后再打印，适合需要精确控制分页、保留样式的场景。

js实现精准打印

// 使用html2pdf.js示例
html2pdf().from(element).save('document.pdf').then(() => {
  // 可自动触发打印
});

分页控制

通过CSS的page-break-before、page-break-after和page-break-inside属性强制分页，避免表格或图片被截断。

@media print {
  .page-break { page-break-after: always; }
  table { page-break-inside: avoid; }
}

打印预览优化

创建隐藏的iframe装载待打印内容，单独设置样式后打印，避免主页面样式干扰。

js实现精准打印

function printSpecificContent(content) {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  iframe.contentDocument.write(content);
  iframe.contentDocument.close();
  iframe.contentWindow.print();
  setTimeout(() => document.body.removeChild(iframe), 1000);
}

打印尺寸适配

通过CSS的@page规则定义纸张大小、方向和边距，确保不同尺寸纸张的兼容性。

@page {
  size: A4 portrait;
  margin: 1cm;
  marks: crop cross;
}

打印内容选择

通过JavaScript动态选择DOM元素进行打印，例如仅打印特定区域或过滤内容。

function printElement(elementId) {
  const printContent = document.getElementById(elementId).innerHTML;
  const originalContent = document.body.innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}