使用window.print()触发打印，结合@media print设置打印样式，隐藏非必要元素，控制分页避免内容断裂，通过开发者工具预览调试，确保打印效果清晰完整。
在HTML5网页中实现打印功能，不只是调用浏览器的打印命令，还需要对打印样式进行优化，确保页面在打印时布局清晰、内容完整。下面介绍如何实现网页打印功能及设置合适的打印样式。
1. 调用浏览器打印功能
使用JavaScript的 window.print() 方法可以快速触发浏览器的打印对话框：
点击按钮后，浏览器会弹出打印预览窗口，用户可选择打印机、纸张方向等设置。
2. 使用CSS控制打印样式
网页在屏幕上显示的效果与打印输出可能差异很大，因此需要通过CSS专门定义打印时的样式。使用 @media print 媒体查询来区分屏幕显示和打印样式：
立即学习“前端免费学习笔记（深入）”；
@media print {
body {
font-size: 12pt;
color: #000;
}
.no-print, nav, header, footer, aside {
display: none !important;
}
.print-only {
display: block;
}
@page {
margin: 2cm;
}
}
说明：
- .no-print 类用于隐藏不需要打印的元素（如按钮、导航栏）
- .print-only 类用于只在打印时显示的内容
- @page 规则设置打印页边距、纸张方向等
3. 控制分页避免内容断裂
长内容在打印时容易在不恰当位置分页，影响阅读。可通过以下CSS属性优化分页：
- page-break-before: always; — 强制在元素前分页
- page-break-after: avoid; — 避免在元素后分页
- break-inside: avoid; — 防止元素内部被分割（推荐使用现代语法）
例如，防止表格或标题被拆开：
table, h1, h2 {
break-inside: avoid;
}
.page-break {
page-break-before: always;
}
4. 打印前预览与调试技巧
在Chrome浏览器中，按F12打开开发者工具，在“Elements”面板右上角点击“⋮”菜单，选择“More tools” → “Rendering”，将“Emulate CSS media”设置为“print”，即可实时查看打印样式效果。
也可以在CSS中临时添加边框或背景色辅助调试：
@media print {
* {
border: 1px solid red !important;
}
}
基本上就这些。合理使用JavaScript触发打印和CSS媒体查询，就能让HTML5页面在打印时呈现良好效果。关键在于提前测试不同内容的分页表现，并隐藏不必要的交互元素。
