Window.print 网页打印 —— 打印 HTML body 的实际高度，而不是看到的内容

引言

在Web开发中，经常需要处理页面打印的需求。然而，默认的打印行为往往不能满足特定场景的要求，比如需要打印出完整的页面内容而不仅仅是可视区域内的内容。本文将详细介绍如何使用 window.print() 方法以及相关技巧来实现在打印时显示整个 HTML body 的实际高度，而不是仅限于用户当前滚动到的部分。

基本概念

什么是 window.print()

window.print() 是一个浏览器内置的方法，用于打开一个新窗口，展示当前页面的内容以便用户打印。这个方法本身不接受任何参数，调用后会弹出一个打印对话框供用户选择打印机和打印选项。

为什么要打印整个 body 的实际高度

通常情况下，浏览器默认只打印用户当前看到的内容，也就是可视窗口的高度。如果页面很长或者包含了滚动条，那么未滚动到的内容就不会被打印出来。因此，在某些情况下，我们需要确保打印出来的页面包括所有内容，即使它们超出了可视区域。

示例一：基本的 window.print() 用法

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

说明

这是一个简单的 printPage 函数，当调用它时会触发浏览器的打印功能。不过，这样做并不能保证打印出整个页面的内容，因为它只是打开默认的打印对话框而已。

示例二：利用伪类 ::after 和 page-break-inside

/* 在打印时添加一个伪元素，用于分割页面 */
@media print {
   
  body::after {
   
    content: "";
    display: block;
    page-break-after: always;
  }
}

说明

通过使用 ::after 伪元素和 page-break-after: always;，我们可以在每个页面的底部添加一个强制分页符，确保长内容会被分隔到多个页面上打印。

示例三：使用 @media print 规则隐藏不需要打印的内容

/* 隐藏打印时不需要的内容 */
@media print {
   
  .no-print,
  .no-print * {
   
    display: none !important;
  }
}

说明

这里我们定义了一个 .no-print 类，该类在打印时会被应用到不需要打印的元素上，使其在打印输出时不显示。

示例四：使用 JavaScript 控制打印范围

function printDiv(divId) {
   
  const divToPrint = document.getElementById(divId);
  const oldParent = divToPrint.parentNode;
  const printContents = divToPrint.innerHTML;
  const originalContent = oldParent.innerHTML;

  // 创建一个临时的 div，将要打印的内容移动到该 div 中
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = printContents;
  oldParent.replaceChild(tempDiv, divToPrint);

  // 打印临时 div
  window.print();

  // 恢复原始内容
  tempDiv.parentNode.replaceChild(divToPrint, tempDiv);
  divToPrint.innerHTML = originalContent;
}

说明

此函数允许我们选择页面中的某个 div 进行打印。我们首先创建一个临时的 div，并将要打印的内容移动到这个 div 中，然后调用 window.print()。打印完成后，再恢复页面的原始状态。

示例五：使用 JavaScript 重置页面样式

function printPageWithStyles() {
   
  // 备份原有样式
  const originalStyle = document.head