本文还有配套的精品资源，点击获取
简介：网页报表表格自动分页打印是提升数据输出质量的重要技术，尤其在处理大量表格数据时，确保内容在A4纸上整洁连续地打印至关重要。本文介绍如何通过CSS的@media print规则设置页边距、控制分页行为，避免表格或单元格在打印时被截断。通过使用page-break-inside、page-break-after等属性优化表格布局，并结合实际调试解决分页问题。配套文件包含问题示例与详细说明，帮助开发者快速实现美观、高效的网页表格打印功能。
1. 网页打印的基本原理与流程
在现代Web开发中，将网页内容尤其是数据密集型的报表表格进行高质量打印输出，已成为企业级应用中的常见需求。网页打印并非简单的“Ctrl+P”操作即可完美呈现，其背后涉及浏览器渲染引擎、CSS媒体查询、文档流控制以及分页逻辑等多个技术层面的协同工作。
@media print {
body {
font-size: 12pt; /* 针对打印优化字体大小 */
}
}
当用户触发 window.print() 时，浏览器会创建一个 打印上下文 ，暂停动画与脚本执行，重新计算样式（优先应用 @media print 规则），并基于纸张尺寸（如A4）和边距设置进行分页布局（pagination）。此过程引发的重排（reflow）可能导致元素位置变化，尤其影响表格结构完整性。理解这一从屏幕渲染到物理输出的转换机制，是实现精准打印控制的基础。
2. @media print CSS规则的核心应用
在网页内容向物理纸张或PDF文档转换的过程中，浏览器会基于打印上下文重新解析和渲染HTML结构。这一过程并非简单复制屏幕显示效果，而是依赖于一套独立的样式控制系统—— @media print 媒体查询。该机制允许开发者为打印输出定义专属的CSS规则，从而实现对字体、布局、颜色、分页等关键要素的精细控制。尤其在企业级报表系统中，表格数据往往密集且层级复杂，若不加以干预，直接打印极易导致信息错位、断页混乱、非必要UI元素干扰等问题。因此，深入掌握 @media print 的应用逻辑与核心属性，是构建高质量打印体验的技术基石。
通过 @media print ，可以屏蔽导航栏、按钮、广告等仅适用于交互界面的组件；调整盒模型以适配A4纸张的实际可打印区域；强制插入分页符避免表格被截断；甚至优化色彩输出以节省墨水成本。更重要的是，它提供了一种声明式的方式来统一管理“视觉呈现”与“打印输出”的分离，使前端架构更具可维护性。本章将从基础语法入手，层层递进至实战模板构建，全面揭示如何利用CSS打印规则实现精准可控的打印行为。
2.1 @media print 媒体查询基础
2.1.1 定义与语法结构
@media print 是一种CSS媒体查询（Media Query），用于指定仅在设备类型为“print”时生效的样式规则。其基本语法如下：
@media print {
/* 打印专用样式 */
body {
font-size: 10pt;
color: black;
}
.no-print {
display: none;
}
}
该规则块内的所有CSS声明只会在用户触发打印操作（如调用 window.print() 或按下 Ctrl+P）时被激活。浏览器在生成打印预览时，会自动加载并应用这些样式，同时忽略或覆盖部分屏幕专用样式。
媒体查询支持多种逻辑组合，例如：
/* 只在打印且页面方向为横向时生效 */
@media print and (orientation: landscape) {
table {
width: 100%;
}
}
/* 在非打印设备上禁用某些样式 */
@media not print {
.print-only {
display: none;
}
}
其中， and 操作符用于连接多个条件， orientation 可取值 portrait （纵向）或 landscape （横向），这对于响应不同纸张布局至关重要。此外，还可结合分辨率、宽度等特性进行更复杂的判断，尽管在打印环境中部分特性（如像素密度）可能受限。
执行逻辑说明：
浏览器检测当前输出目标是否为打印机或PDF生成器。 若匹配 print 类型，则启用此媒体查询中的样式。 样式优先级遵循标准CSS层叠规则，但可通过 !important 提升权重。
参数说明：
print ：目标设备类型，表示打印介质。 screen ：屏幕显示设备。 all ：所有设备类型。 条件表达式可用于精细化控制，如 (min-width: 800px) 。
2.1.2 打印样式表的引入方式（内联、外链、JavaScript动态注入）
在实际项目中，有多种方式引入 @media print 样式，每种方式各有适用场景与优劣。
引入方式 示例代码 优点 缺点 适用场景 内联样式（style标签） 加载快，无需额外请求 难以复用，不利于维护 简单页面或原型开发 外部样式表（link） 易于维护，支持缓存 需网络请求，加载延迟 中大型项目，多页面共享 JavaScript动态注入 document.createElement('style') 动态添加 运行时控制，按需加载 实现复杂，SEO不友好 SPA应用、条件性打印需求
示例：外部样式表引入
参数说明 ： media="print" 表示该样式表仅在打印时加载，不会影响屏幕渲染性能。
示例：JavaScript动态注入
function injectPrintStyles() {
const style = document.createElement('style');
style.type = 'text/css';
style.media = 'print';
style.textContent = `
@media print {
.header, .sidebar { display: none; }
table { page-break-inside: avoid; }
}
`;
document.head.appendChild(style);
}
执行逻辑分析 ： 1. 创建一个新的