3步搞定缩印小抄：从原理到完整示例源码拆解

刚学会语法却不知怎么搭项目？别急，这篇带你用完整示例看透缩印小抄的核心逻辑。

很多开发者卡在“知道怎么用，但不知道底层怎么跑”。今天咱们不整虚的，直接扒开缩印小抄的源码黑箱。就像 MDN Web Docs 里强调的那样，理解浏览器渲染引擎的层叠规则，是做好前端打印适配的基石。咱们今天的目标，就是让你看完就能上手，把那些看不见的 CSS 打印规则变成你能掌控的代码。

入口定位：打印媒体查询的触发机制

缩印小抄的核心，其实就藏在一个不起眼的媒体查询里。你以为打印只是把屏幕内容硬塞进纸张？错了。浏览器在处理 print 事件时，会重新计算样式表。

很多人踩坑，就是因为没搞懂 @media print 和 @media screen 的优先级。在源码层面，浏览器引擎（比如 Blink 或 Gecko）在接收到打印指令后，会构建一个新的样式计算树。这时候，@media print 块内的样式会覆盖掉默认的屏幕样式，除非你显式声明了 !important。

这里有个关键细节：@page 规则。这是 CSS Paged Media 规范的一部分，专门用来定义页面的边距、大小甚至页眉页脚。在大多数现代浏览器中，@page { margin: 1cm; } 是控制打印留白的唯一标准方式。如果你还在用 body { padding: 100px; } 来凑合，打印出来大概率会错位。

核心痛点：为什么屏幕上看没问题，打印出来文字挤成一团？原因：屏幕是流动的，纸张是固定的。你的 div 宽度如果是 100%，在屏幕上占满窗口，但在 A4 纸上可能只有 210mm 宽，扣除边距后实际可用宽度更小，导致内容溢出或换行异常。

核心片段：CSS 打印样式的逐行剖析

来看一段典型的缩印小抄样式代码。这段代码来自一个常见的打印优化库，我把它简化并加了逐行注释，帮你理清逻辑。

/* 核心打印样式表：针对 A4 纸优化 */
@page {size: A4; /* 指定纸张大小，避免浏览器默认 Letter 尺寸差异 */margin: 2cm 1.5cm; /* 上下左右边距，给页眉页脚留空间 */
}@media print {/* 1. 隐藏非核心元素：导航栏、按钮、侧边栏等 */.no-print, .sidebar, .nav-bar {display: none !important; /* 强制隐藏，防止被其他样式覆盖 */}/* 2. 调整布局：从多列变单列，适配纸张宽度 */.container {width: 100% !important; /* 占满可用宽度 */max-width: none !important; /* 取消屏幕上的最大宽度限制 */margin: 0 !important; /* 去除外边距，避免重复计算 */padding: 0 !important; /* 去除内边距，由 @page 统一控制 */}/* 3. 优化文本渲染：提高可读性 */body {font-size: 12pt; /* 使用 pt 单位，而非 px，更适配打印 */line-height: 1.5; /* 增加行高，避免行距过密 */color: #000; /* 强制黑色，节省墨水且对比度高 */background: #fff; /* 强制白底，避免深色背景浪费墨水 */}/* 4. 分页控制：避免标题和正文分离 */h1, h2, h3 {page-break-after: avoid; /* 标题后尽量不分页 */break-after: avoid; /* 标准属性，兼容性更好 */}.page-break {page-break-before: always; /* 强制在此处分页 */break-before: always;}/* 5. 图片处理：避免跨页切割 */img {max-width: 100%; /* 图片不超出容器 */page-break-inside: avoid; /* 图片内部不分页 */break-inside: avoid;}
}

逐行拆解重点：

size: A4：很多国内开发者忽略这点，导致海外用户打印成 Letter 纸，边距不对。显式声明能统一体验。
display: none !important：在打印场景下，!important 几乎是必须的。因为屏幕样式里可能有大量的 display: flex 或 grid，如果不强制覆盖，隐藏元素可能还会占位。
font-size: 12pt：这是打印领域的黄金法则。px 是屏幕单位，pt 是打印单位。1pt ≈ 1.333px。使用 pt 能确保在不同 DPI 的打印机上字号一致。
page-break-* vs break-*：page-break-* 是旧规范，已废弃。新规范使用 break-*。但为了兼容老旧浏览器（如某些企业内的 IE 或旧版 Chrome），建议两者都写。MDN Web Docs 明确指出，break-* 是 page-break-* 的替代方案，且支持更复杂的值如 auto, avoid, always。

设计思想：为什么是“隐藏+重排+优化”？

缩印小抄的设计思想，本质上是上下文切换。

在屏幕上下文里，我们追求的是“交互性”和“视觉丰富度”。所以有阴影、有渐变、有滚动条、有响应式多列布局。

在打印上下文里，我们追求的是“信息密度”和“阅读效率”。

去交互化：所有按钮、链接下划线（可选）、阴影、动画全部移除。
线性化：多列布局必须变单列。因为人的视线在纸上是从左到右、从上到下扫描的，多列会让视线跳跃，增加认知负担。
墨水资源节约：深色背景、彩色文字尽量转黑白。除非是品牌色关键信息。

一个常见的误区：试图用 JavaScript 在打印前修改 DOM。比如：window.onbeforeprint = () => { document.body.classList.add('print-mode'); }。这种做法很糟糕。因为 JS 执行有延迟，可能导致打印瞬间样式还没应用完，出现闪烁或样式缺失。CSS 媒体查询是声明式的，浏览器引擎在打印前会同步计算，性能更好，可靠性更高。

正确姿势：纯 CSS 方案优先。只有当内容结构需要动态变化时（比如把表格转成卡片），才考虑 JS 介入，且必须配合 onbeforeprint 和 onafterprint 事件进行状态还原。

手写简化版：从零搭建打印样式

咱们手写一个最小可用的缩印小抄样式。假设你有一个博客页面，包含标题、正文、侧边栏。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>打印测试</title><style>/* 屏幕样式 */body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;margin: 0;padding: 0;}.wrapper {display: flex;max-width: 1200px;margin: 0 auto;}.main-content {flex: 1;padding: 20px;border-right: 1px solid #eee;}.sidebar {width: 300px;padding: 20px;background: #f9f9f9;}.btn-print {background: #007bff;color: white;border: none;padding: 10px 20px;cursor: pointer;margin-bottom: 20px;}.card {background: #fff;box-shadow: 0 2px 5px rgba(0,0,0,0.1);padding: 15px;margin-bottom: 20px;border-radius: 4px;}/* 打印样式 */@media print {@page {margin: 1.5cm;}body {font-size: 11pt;color: #000;background: #fff;}/* 隐藏屏幕专属元素 */.btn-print, .sidebar {display: none !important;}/* 布局扁平化 */.wrapper {display: block;max-width: 100%;}.main-content {padding: 0;border: none;}.card {box-shadow: none;border: 1px solid #ccc; /* 用边框代替阴影，更清晰 */border-radius: 0;page-break-inside: avoid; /* 卡片内容不跨页 */}/* 链接显示 URL，方便读者查找 */a[href^="http"]::after {content: " (" attr(href) ")";font-size: 9pt;color: #666;}}</style>
</head>
<body><div class="wrapper"><div class="main-content"><button class="btn-print" onclick="window.print()">打印</button><h1>文章标题</h1><p>这是正文内容，包含一些长文本...</p><div class="card"><h2>卡片标题</h2><p>卡片内容，如果太长会分页。</p></div><div class="card"><h2>第二个卡片</h2><p>更多内容...</p></div></div><div class="sidebar"><h3>侧边栏</h3><p>这里的内容在打印时会被隐藏。</p></div></div>
</body>
</html>

代码解析：

display: block：将 flex 布局重置为 block，确保单列流式布局。
border: 1px solid #ccc：打印时阴影效果很淡且浪费墨水，细边框能更清晰地界定内容块。
a[href^="http"]::after：这是一个高级技巧。在打印版中，自动在外部链接后追加 URL。这对读者非常友好，他们可以在纸上看到来源，而不必去扫描屏幕。

应用场景：从博客到发票的通用套路

这套缩印小抄逻辑，不仅仅适用于博客。

1. 电商订单详情页

痛点：屏幕上是复杂的多列布局，包含用户信息、商品列表、物流信息。
打印需求：用户需要打印订单去线下提货或报销。
方案：
- 隐藏“加入购物车”、“修改地址”等按钮。
- 商品列表从表格转成简单的文本列表，避免列宽不均。
- 增加订单号、日期的显著展示。
- 使用 @page 控制每页只显示一个订单或固定数量的商品。

2. 简历导出

痛点：在线简历编辑器的样式很花哨，但打印出来字体大小不一。
方案：
- 强制 font-family 为系统默认字体（如 Arial, Times New Roman），避免 PDF 字体嵌入问题。
- 严格控制行高和段落间距，确保一页能放下关键信息。
- 使用 page-break-inside: avoid 保护“工作经历”、“教育背景”等模块不被切割。

3. 数据报表

痛点：Excel 导出的 PDF 表格列被截断。
方案：
- 在打印前，通过 JS 检测表格宽度，如果超过页面宽度，自动调整 font-size 或旋转页面（@page { size: landscape; }）。
- 使用 thead { display: table-header-group; } 确保表头在每一页都重复显示。这是 CSS 打印表格的神器，MDN Web Docs 中对此有专门章节，很多开发者不知道这个属性。

避坑指南：

浏览器差异：Chrome 和 Firefox 对 @page 的支持程度略有不同。Chrome 对 size 属性支持较好，但某些旧版本可能忽略 margin。建议提供 PDF 导出功能作为备选，而不是依赖纯打印。
缩放问题：用户在打印对话框里手动缩放比例，会破坏你的 pt 单位设定。在 UI 上提示用户“请保持缩放比例为 100%”，或者在 JS 中尝试干预（但浏览器通常禁止 JS 控制打印对话框的缩放比例）。
图片加载：确保打印前所有图片已加载完毕。可以使用 window.onload 或 Promise.all 等待图片加载，再触发 window.print()。