优点

• 您的页面在打印后保留交互性
• 与框架配合良好
• 不需要复制 UI 进行打印

步骤

1. 打印模式下隐藏页面的所有内容
2. 使目标元素在打印模式下可见

步骤1

@media print {
  body {
    visibility: hidden;
  }
}

步骤2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}

然后打印

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());

此方法避免了失去交互性的陷阱，其他方法将整个页面内容替换为静态 HTML，从而失去了交互性。

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;