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

引言基本概念什么是 window.print()为什么要打印整个 body 的实际高度

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

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

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

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

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

不同角度的功能使用思路思路一：使用 CSS 生成内容说明思路二：使用 CSS 变量来控制打印样式说明思路三：使用 CSS Grid 或 Flexbox 优化打印布局说明

实际工作中的使用技巧技巧一：利用 JavaScript 动态调整页面样式说明技巧二：使用 JavaScript 检测打印对话框关闭说明技巧三：使用 CSS 媒体查询和 JavaScript 来动态调整页面样式说明

拓展内容打印样式表的使用使用 JavaScript 控制打印选项使用 JavaScript 模拟打印

结语

引言

在Web开发中，经常需要处理页面打印的需求。然而，默认的打印行为往往不能满足特定场景的要求，比如需要打印出完整的页面内容而不仅仅是可视区域内的内容。本文将详细介绍如何使用 <code>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.innerHTML;

// 添加打印样式

const printStyle = document.createElement('style');

printStyle.type = 'text/css';

printStyle.appendChild(document.createTextNode(`

@media print {

.no-print,

.no-print * {

display: none !important;

}

body::after {

content: "";

display: block;

page-break-after: always;

}

}

`));

document.head.appendChild(printStyle);

// 打印页面

window.print();

// 恢复原有样式

document.head.innerHTML = originalStyle;

}

说明

这段代码首先备份了页面原有的样式，然后添加了新的打印样式，调用 window.print() 后再次恢复原有样式。这种方法可以确保打印样式不会影响页面的正常显示。

不同角度的功能使用思路

思路一：使用 CSS 生成内容

/* 生成一个标题用于打印 */

@media print {

body::before {

content: "打印标题";

font-weight: bold;

font-size: 24px;

text-align: center;

page-break-before: always;

}

}

说明

在打印前添加一个标题，使用 ::before 伪元素可以轻松实现。

思路二：使用 CSS 变量来控制打印样式

:root {

--print-title: "打印标题";

}

@media print {

body::before {

content: var(--print-title);

font-weight: bold;

font-size: 24px;

text-align: center;

page-break-before: always;

}

}

说明

使用 CSS 变量可以让样式更灵活，便于维护和修改。

思路三：使用 CSS Grid 或 Flexbox 优化打印布局

/* 使用 CSS Grid 优化打印布局 */

@media print {

.content-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 1rem;

}

}

说明

使用 CSS Grid 或 Flexbox 可以创建更加响应式的打印布局。

实际工作中的使用技巧

技巧一：利用 JavaScript 动态调整页面样式

function setupForPrinting() {

const printStyle = document.createElement('style');

printStyle.type = 'text/css';

printStyle.appendChild(document.createTextNode(`

@media print {

.no-print,

.no-print * {

display: none !important;

}

body::after {

content: "";

display: block;

page-break-after: always;

}

}

`));

document.head.appendChild(printStyle);

// 隐藏不需要打印的元素

const noPrintElements = document.querySelectorAll('.no-print');

noPrintElements.forEach(element => element.style.display = 'none');

// 打印页面

window.print();

// 清理样式

document.head.removeChild(printStyle);

noPrintElements.forEach(element => element.style.display = '');

}

说明

这个函数在打印前动态添加样式，并在打印后清除这些样式，确保页面恢复到初始状态。

技巧二：使用 JavaScript 检测打印对话框关闭

function printPageWithCallback() {

window.print();

window.onafterprint = function() {

console.log('打印完成！');

};

}

说明

onafterprint 事件在打印对话框关闭后触发，可以用来执行一些清理或回调操作。

技巧三：使用 CSS 媒体查询和 JavaScript 来动态调整页面样式

function prepareForPrint() {

const printStyle = document.createElement('style');

printStyle.type = 'text/css';

printStyle.appendChild(document.createTextNode(`

@media print {

.no-print,

.no-print * {

display: none !important;

}

body::after {

content: "";

display: block;

page-break-after: always;

}

}

`));

document.head.appendChild(printStyle);

// 其他准备逻辑

// ...

window.print();

// 清理样式

document.head.removeChild(printStyle);

}

说明

通过结合 CSS 媒体查询和 JavaScript，我们可以动态调整页面样式以适应打印需求。

拓展内容

打印样式表的使用

打印样式表：可以通过 <link> 标签指定一个单独的打印样式表，该样式表只在打印时生效。示例：

<link rel="stylesheet" media="print" href="print.css">code>

使用 JavaScript 控制打印选项